Menú
Render Mermaid diagrams as PNG, SVG, or PDF images using the Mermaid CLI (mmdc).
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
| name | mermaid-render |
| description | Render Mermaid diagrams as PNG, SVG, or PDF images using the Mermaid CLI (mmdc). |
Render Mermaid chart syntax into PNG, SVG, or PDF images using the Mermaid CLI (mmdc).
python3 /path/to/mermaid-render/render.py "mermaid code" output.png
npm install -g @mermaid-js/mermaid-cli
echo '{"args": ["--no-sandbox", "--disable-setuid-sandbox"]}' > ~/.puppeteer.json
python3 render.py "flowchart TD A[Start] --> B[End]" output.png
| Position | Parameter | Description | Default |
|---|---|---|---|
| 1 | Mermaid code | The Mermaid diagram code (required) | - |
| 2 | Output path | Output file path | /tmp/mermaid.png |
| 3 | Format | Output format: png, svg, pdf | png |
| 4 | Background | Background color | white |
| 5 | Scale | Scale factor (integer) | 2 |
python3 render.py "flowchart TD
A[User] --> B[AI]
B --> C[Response]" flowchart.png
python3 render.py "sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!" sequence.png
python3 render.py "classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal: +int age
Animal: +eat()" class.png
python3 render.py "gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2024-01-01, 30d" gantt.png
from render import render_mermaid
# Basic usage
output_path = render_mermaid(
mermaid_code="flowchart TD A --> B",
output_path="/tmp/diagram.png",
output_format="png",
background="white",
scale=2
)
print(f"Diagram saved to: {output_path}")
flowchart, graph)sequenceDiagram)classDiagram)stateDiagram, stateDiagram-v2)erDiagram)journey)gantt)pie)requirementDiagram)gitGraph)C4Context, C4Container, etc.)mindmap)timeline)quadrantChart)xychart)block)For advanced puppeteer configuration, edit ~/.puppeteer.json:
{
"args": ["--no-sandbox", "--disable-setuid-sandbox"],
"headless": true,
"executablePath": "/usr/bin/chromium-browser"
}
You can customize the appearance using Mermaid themes:
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000' }}}%%
flowchart TD
A --> B
# Verify installation
which mmdc
# Reinstall if needed
npm install -g @mermaid-js/mermaid-cli
# Install Chrome dependencies (Ubuntu/Debian)
sudo apt-get install -y chromium-browser
# Or install puppeteer with bundled Chrome
npm install puppeteer
# Create puppeteer config for root user
echo '{"args": ["--no-sandbox", "--disable-setuid-sandbox"]}' > ~/.puppeteer.json
| Format | MIME Type | Use Case |
|---|---|---|
| PNG | image/png | Web, presentations, documents |
| SVG | image/svg+xml | Scalable graphics, web |
| application/pdf | Print, documents |
\n in command linetransparent as background color for PNG/SVG