mermaid-to-image
Skill6 starsChanged 3 months agoMITView on GitHub
Рендер Mermaid-диаграмм (.mmd) в PNG/SVG. Скрипт mermaid_to_image.py читает .mmd (файл или stdin) и отдаёт изображение: приоритет локальному mmdc (mermaid-cli), fallback на публичный API mermaid.ink. Поддерживает выбор формата (svg/png), фоновый цвет, масштаб PNG, движок рендера (auto/mmdc/ink), вывод в файл или stdout. Триггеры: 'mermaid в картинку', 'отрендерить диаграмму', '.mmd в png', 'mermaid to image', 'render diagram', 'диаграмма в svg', 'схема в картинку'.
- Installs packages
In this repository59 other files it gives its agents.
- skills/chronos/references/AGENTS.mdAGENTS.md
- api-contract-testingSkill
- api-doc-generatorSkill
- canonSkill
- censorSkill
- changelog-generatorSkill
- chronosSkill
- code-reviewSkill
- commit-lintSkill
- commit-message-writerSkill
- coverage-analyzerSkill
- csv-proSkill
- data-analysisSkill
- deweySkill
- diagram-makerSkill
- doc-compareSkill
- docs-productSkill
- docs-projectSkill
- docs-systemSkill
- dsh-runnerSkill
- frontend-a11ySkill
- frontend-design-tasteSkill
- frontend-perfectionSkill
- frontend-performanceSkill
- frontend-testingSkill
- github-repo-hygieneSkill
- long-running-agent-workflowSkill
- mobile-frontendSkill
- pdf-report-builderSkill
- plan-skillSkill
- prd-to-appSkill
- presentation-craftSkill
- presentation-engineeringSkill
- presentation-makerSkill
- raster-to-svgSkill
- reddit-karmaSkill
- repo-community-filesSkill
- repo-metadata-healthSkill
- repo-readme-assetsSkill
- repo-social-previewSkill
- secret-scannerSkill
- security-reviewSkill
- seo-auditSkill
- seo-contentSkill
- seo-crawlSkill
- seo-schemaSkill
- seo-toolkitSkill
- skill-feedbackSkill
- skill-forgeSkill
- skill-suggesterSkill
- sql-helperSkill
- systematic-debuggerSkill
- test-generatorSkill
- test-graphicsSkill
- velesSkill
- version-bumperSkill
- video-script-writerSkill
- web-replicationSkill
- web-scraperSkill
The file
We split this skill into the rules it gives an agent
3 rules. About 0 are common, 2 are distinctive, and 1 is very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈2
Distinctive · estimate
This author's own choices. Worth a look.
1
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 21
Use this skill when:
- Distinctive: line 27
Do NOT use when:
- Very specific: line 74
Do not use to design a new diagram from prose.
≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
Mermaid To Image
Рендер Mermaid-диаграмм из текста
.mmdв файлы PNG/SVG.
Загружай этот скилл когда нужно превратить Mermaid-диаграмму в картинку: для README, документации, презентаций, бейджей или вложений в отчёты.
🎯 When to use
Use this skill when:
- Есть
.mmd-файл или текст Mermaid и нужен PNG/SVG-файл - Нужно вставить диаграмму в README/вики/презентацию (у рендер-плагинов GitHub нет PNG)
- Просят «отрендерить диаграмму», «mermaid в png», «схему в картинку»
- Нужна статичная картинка для экспорта (не интерактивная mermaid.live)
Do NOT use when:
- Диаграмма нужна только в Markdown-исходнике — GitHub рендерит Mermaid сам
- Нужны диаграммы из текстового описания без Mermaid-кода — это
diagram-maker - Нужны диаграммы архитектуры AWS/GCP — отдельный рендер в roadmap
📦 Files
SKILL.md— этот файлscripts/mermaid_to_image.py— рендерер .mmd → PNG/SVG (Python 3 stdlib)
🧰 Usage
# Файл → SVG (по умолчанию):
python3 skills/mermaid-to-image/scripts/mermaid_to_image.py -i diagram.mmd -o diagram.svg
# Файл → PNG:
python3 skills/mermaid-to-image/scripts/mermaid_to_image.py -i diagram.mmd -o diagram.png
# Из stdin (текст прямо в пайплайне):
cat diagram.mmd | python3 mermaid_to_image.py --stdin -o out.svg
# С фоном и масштабом:
python3 mermaid_to_image.py -i d.mmd -o d.png --bg white --scale 3
# В stdout (для программного использования):
python3 mermaid_to_image.py -i d.mmd --stdout > d.svg🧭 Движки рендера
| Движок | Как включить | Когда выбирать |
mmdc (mermaid-cli) | --engine mmdc (npm i -g @mermaid-js/mermaid-cli) | офлайн, приватные схемы, большие диаграммы, точный контроль |
ink (mermaid.ink) | --engine ink | без установки, быстрый старт; PNG отдаётся как JPEG-образ |
По умолчанию --engine auto: используется mmdc, если он установлен, иначе ink.
🔬 Проверка результата
- SVG: файл начинается с
<svg, валиден для вставки в Markdown/HTML. - PNG:
file out.pngпоказывает «JPEG image data» — это нормально для mermaid.ink (API отдаёт JPEG-кодированный образ); визуально проверьте открытием. - При ошибке сети/API скрипт пишет причину в stderr и завершается с кодом 2.
Boundaries
- Do not use to design a new diagram from prose; use
diagram-maker.
Evidence and completion gate
Run the documented command against the user’s actual input. Report the command, exit status, files changed or produced, and relevant stdout/stderr. Separate blocked or pre-existing failures from failures introduced by the current work. Do not call the result complete when the script was only described or when an artifact was not reopened and checked.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.