mermaid-diagrams
Mermaid diagram syntax for flowcharts, sequence diagrams, ERDs, class diagrams, and more. Use when creating diagrams in markdown, generating architecture visuals, or documenting system flows. Use for mermaid, diagram, flowchart, sequence, ERD, class-diagram, gantt, pie-chart, mindmap.
- Installs
- 168
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/oakoss/agent-skills --skill mermaid-diagrams- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads mermaid-diagrams automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Mermaid Diagrams
Overview
Mermaid is a JavaScript-based diagramming tool that renders Markdown-inspired text definitions into SVG diagrams. It supports flowcharts, sequence diagrams, ER diagrams, class diagrams, state diagrams, Gantt charts, pie charts, mindmaps, and git graphs directly inside Markdown files.
When to use: Documenting system architecture, visualizing data models, illustrating request flows, creating project timelines, embedding diagrams in GitHub/GitLab READMEs or docs sites.
When NOT to use: Pixel-perfect design mockups, interactive dashboards, diagrams requiring custom artwork or complex spatial layouts beyond hierarchical/relational structures.
Quick Reference
| Diagram | Declaration | Key Points |
|---|---|---|
| Flowchart | flowchart TD | Directions: TB, TD, BT, RL, LR. Supports subgraphs |
| Sequence | sequenceDiagram | Participants, messages, loops, alt/opt/par blocks |
| ER Diagram | erDiagram | Crow's foot notation, PK/FK/UK attributes |
| Class Diagram | classDiagram | UML relationships, visibility modifiers, annotations |
| State Diagram | stateDiagram-v2 | Transitions, composite states, forks/joins, choice |
| Gantt Chart | gantt | Sections, tasks with dates/durations, milestones |
| Pie Chart | pie | Labels with numeric values, optional title |
| Mindmap | mindmap | Indentation-based hierarchy, multiple node shapes |
| Git Graph | gitGraph | Commits, branches, merges, cherry-picks, tags |
| Architecture | architecture-beta | Services in groups, directional edges (T/B/L/R) |
| Block Diagram | block-beta | Column layout, block arrows, nested blocks |
| Timeline | timeline | Time periods with events, sections for grouping |
| Sankey | sankey-beta | Flow quantities between nodes, CSV-like data format |
| XY Chart | xychart-beta | Bar and line charts with x/y axes |
| Quadrant Chart | quadrantChart | Four-quadrant plot with labeled axes and data points |
| Kanban | kanban | Columns with task cards, assignees, priorities |
| Packet | packet-beta | Network packet structure with bit-range fields |
| Requirement | requirementDiagram | Requirements, elements, and verification links |
| C4 Diagram | C4Context | C4 model: Context, Container, Component, Deployment |
Common Mistakes
| Mistake | Correct Pattern |
|---|---|
Using graph instead of flowchart | Use flowchart for subgraph edges and newer features |
| Missing space after arrow in sequences | Alice->>Bob: msg not Alice->>Bob:msg |
| Wrong cardinality order in ER diagrams | Left cardinality, then line, then right cardinality |
Forgetting end after subgraph/loop/alt | Every block keyword requires a matching end |
| Using reserved words as node IDs | Wrap reserved words in quotes or use aliases |
| Bare code blocks without language tag | Always use ```mermaid as the language specifier |
| Mixing v1 and v2 state diagram syntax | Use stateDiagram-v2 consistently for current features |
| Unquoted labels with special characters | Wrap labels containing special characters in double quotes |
Missing dateFormat in Gantt charts | Always declare dateFormat before task definitions |
| Using tabs instead of spaces for mindmaps | Mindmap indentation requires spaces, not tabs |
Delegation
- Diagram discovery and exploration: Use
Exploreagent to find existing diagrams in the codebase - Diagram review: Use
Taskagent to verify diagram accuracy against code - Architecture documentation: Use
code-revieweragent for doc quality checks
References
- Flowcharts: nodes, edges, subgraphs, directions, and styling
- Sequence diagrams: participants, messages, activations, and control flow
- Entity-relationship diagrams: entities, attributes, and cardinality
- Class diagrams: classes, methods, relationships, and annotations
- Other diagrams: Gantt, pie, mindmap, state, and git graph
- Architecture, block, timeline, Sankey, XY chart, quadrant, kanban, packet, requirement, and C4 diagrams
FAQ
What does the mermaid-diagrams skill do?
Mermaid diagram syntax for flowcharts, sequence diagrams, ERDs, class diagrams, and more. Use when creating diagrams in markdown, generating architecture visuals, or documenting system flows. Use for mermaid, diagram, flowchart, sequence, ERD, class-diagram, gantt, pie-chart, mindmap.
How do I install mermaid-diagrams?
Run npx skills add https://github.com/oakoss/agent-skills --skill mermaid-diagrams in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/mermaid-diagrams/ (personal) or .claude/skills/mermaid-diagrams/ (project).
Which AI agents can use mermaid-diagrams?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is mermaid-diagrams safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains mermaid-diagrams?
It is published by oakoss in oakoss/agent-skills. It has 168 recorded installs.
More from oakoss/agent-skills
ui-ux-polish
oakoss/agent-skills
Iterative UI/UX polishing workflow for web applications. Use when improving visual polish, refining desktop and mobile UX separately, running iterative enhancement cycles, applying design patterns like glassmorphism or bento grids, or auditing accessibility and WCAG compliance. Use for Stripe-level visual quality, responsive optimization, and design system alignment.
playwright
oakoss/agent-skills
Open the skill to read its SKILL.md instructions.
coolify
oakoss/agent-skills
Coolify self-hosted PaaS for deploying applications, databases, and services via REST API and Git integration. Covers API authentication, deployment triggers, build packs (Nixpacks, Dockerfile, Compose), CI/CD with GitHub Actions webhooks, environment management, and Traefik proxy configuration. Use when deploying apps to Coolify, triggering deployments via API, configuring build packs, setting up GitHub Actions CI/CD pipelines, managing environment variables, or troubleshooting deployment failures.
application-security
oakoss/agent-skills
Open the skill to read its SKILL.md instructions.
find-skills
oakoss/agent-skills
Discovers and installs agent skills from the open ecosystem. Enriches search results with descriptions fetched from skills.sh. Use when a user asks "how do I do X", "find a skill for X", "is there a skill that can...", or wants to extend agent capabilities. Use for skill discovery, skill search, skill install, finding tools.
drizzle-orm
oakoss/agent-skills
Open the skill to read its SKILL.md instructions.
Popular docs & writing skills
grill-with-docs
mattpocock/skills
A relentless interview to sharpen a plan or design, which also creates docs (ADR's and glossary) as we go.
lark-markdown
open.feishu.cn
飞书 Markdown：查看、创建、上传、编辑和比较飞书中的原生 Markdown 文件。当用户要操作飞书 Markdown 文件，或比较其远端版本及本地草稿时使用。纯本地 Markdown 文件操作不触发本 skill。不负责将 Markdown 导入为飞书在线文档，也不负责文件搜索、权限、评论、移动、删除等云空间管理操作。
writing-beats
mattpocock/skills
Writing, exploit; assemble raw material into a journey of beats, grounding each term before a beat leans on it.
writing-shape
mattpocock/skills
Writing, exploit: shape raw material into an article, paragraph by paragraph.
writing-fragments
mattpocock/skills
Writing, explore: mine raw fragments, no structure yet.
writing-for-agents
mattpocock/skills
Writing documents for agents. Use when creating or editing skills, or modifying AGENTS.md or CLAUDE.md.