Back to Skills

markdown-mermaid

verified

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 GitHub

Marketplace

aeo-skill-marketplace

AeyeOps/aeo-skill-marketplace

Plugin

aeo-documentation

development

Repository

AeyeOps/aeo-skill-marketplace

aeo-documentation/skills/markdown-mermaid/SKILL.md

Last Verified

January 25, 2026

Install Skill

Select agents to install to:

Scope:
npx add-skill https://github.com/AeyeOps/aeo-skill-marketplace/blob/main/aeo-documentation/skills/markdown-mermaid/SKILL.md -a claude-code --skill markdown-mermaid

Installation paths:

Claude
.claude/skills/markdown-mermaid/
Powered by add-skill CLI

Instructions

# 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

Validation Details

Front Matter
Required Fields
Valid Name Format
Valid Description
Has Sections
Allowed Tools
Instruction Length:
4021 chars