Craft Mermaid diagrams within Markdown for flowcharts, ERDs, sequence diagrams, state machines, Gantt charts, and mindmaps. Includes validated syntax templates, layout optimization, and cross-platform rendering for GitHub, GitLab, VS Code, and Obsidian. Activate when visualizing architecture, documenting APIs, illustrating database schemas, debugging rendering failures, or selecting the appropriate diagram type for technical documentation.
View on GitHubAeyeOps/aeo-skill-marketplace
aeo-documentation
aeo-documentation/skills/markdown-mermaid/SKILL.md
January 25, 2026
Select agents to install to:
npx add-skill https://github.com/AeyeOps/aeo-skill-marketplace/blob/main/aeo-documentation/skills/markdown-mermaid/SKILL.md -a claude-code --skill markdown-mermaidInstallation paths:
.claude/skills/markdown-mermaid/# Mermaid in Markdown
Create diagrams using fenced code blocks:
````markdown
```mermaid
flowchart TB
A[Start] --> B[End]
```
````
## Reference Files (Load Only What You Need)
### Core Diagrams
| Diagram Type | Load this file |
|--------------|----------------|
| **Flowchart** - processes, workflows | [flowchart.md](references/flowchart.md) |
| **Sequence** - API interactions | [sequence.md](references/sequence.md) |
| **Class** - OOP structures | [class.md](references/class.md) |
| **State** - lifecycles, FSM | [state.md](references/state.md) |
| **ERD** - database schemas | [erd.md](references/erd.md) |
| **Gantt** - project timelines | [gantt.md](references/gantt.md) |
### Charts & Data Visualization
| Diagram Type | Load this file |
|--------------|----------------|
| **Pie** - proportional data | [pie.md](references/pie.md) |
| **Quadrant** - priority matrix | [quadrant.md](references/quadrant.md) |
| **Radar** - multi-dimensional | [radar.md](references/radar.md) |
| **XY Chart** - line/bar graphs | [xychart.md](references/xychart.md) |
| **Sankey** - flow quantities | [sankey.md](references/sankey.md) |
| **Treemap** - hierarchical data | [treemap.md](references/treemap.md) |
### Specialized Diagrams
| Diagram Type | Load this file |
|--------------|----------------|
| **C4** - architecture (Context/Container/Component) | [c4.md](references/c4.md) |
| **Architecture** - cloud/infra | [architecture.md](references/architecture.md) |
| **Block** - manual layouts | [block.md](references/block.md) |
| **Mindmap** - brainstorming | [mindmap.md](references/mindmap.md) |
| **Timeline** - chronological events | [timeline.md](references/timeline.md) |
| **Journey** - user workflows | [journey.md](references/journey.md) |
| **GitGraph** - branching | [gitgraph.md](references/gitgraph.md) |
| **Kanban** - task boards | [kanban.md](references/kanban.md) |
| **ZenUML** - code-like sequence | [zenuml.md](references/zenuml.md) |
| **Requirement** - SysML | [requirem