mermaid-diagram-creator-skill

What I do

I create professional Mermaid diagrams from natural language descriptions — no MCP server, no rendering service, zero tool overhead.

1. Parse Diagram Request: Analyze the user's description to understand diagram type and structure
2. Generate Mermaid Syntax: Create valid Mermaid source code
3. Embed Inline (default): Write a fenced ```mermaid block directly into the target .md file — GitHub, GitLab, and VS Code preview render it natively
4. Optional File Render: When a standalone image is required, render via npx -y @mermaid-js/mermaid-cli (mmdc)
5. Preserve Sources: Keep .mmd files alongside rendered output when file rendering is used
6. Handle Complex Diagrams: Split large diagrams into multiple blocks/files when needed

Supported diagram types:

• Flowcharts (TD, LR, BT, RL)
• Sequence diagrams
• Class diagrams
• State diagrams (v2)
• ER diagrams
• Gantt charts
• Pie charts
• Mind maps
• Git graphs
• User journey
• Timeline

When to use me

Use this workflow when:

• You need to visualize workflows, processes, or system architecture
• You want Mermaid diagrams for documentation or presentations
• You need to include diagrams in git commits or PLAN files
• You're creating planning documents for GitHub issues or JIRA tickets
• You need to document code logic or system flows visually
• You want diagrams that can be edited later (source .mmd files preserved)

Rendering (no MCP)

Default — inline block. For diagrams integrated into Markdown (READMEs, PLAN files, ADRs), write the diagram directly into the .md as a fenced code block. GitHub/GitLab/VS Code render it natively; the source stays text (diffable, greppable, zero tokens beyond the diagram itself):

```mermaid
flowchart TD
    A[Start] --> B{Decision}
```

Optional — standalone file via mmdc. Only when an actual image file is needed (pandoc/LaTeX pipelines, slide decks, contexts that don't render mermaid):

npx -y @mermaid-js/mermaid-cli -i diagram.mmd -o diagram.svg -b white