mermaid-diagrams
Mermaid Diagrams enables you to build flowcharts, sequence diagrams, class diagrams, entity-relationship diagrams, Gantt charts, and other visual documentation using Mermaid markdown syntax. The skill supports multiple diagram types with full syntax reference and styling options.
Mermaid Diagrams lets you create flowcharts, sequence diagrams, and visual documentation using Mermaid syntax.
AI-generated summary based on this skill's SKILL.md
Install
nicepkg/ai-workflow/mermaid-diagrams · repository language: HTML
git clone https://github.com/nicepkg/ai-workflow
cp -r ai-workflow/workflows/talk-to-slidev-workflow/.claude/skills/mermaid-diagrams ~/.claude/skills/mermaid-diagramsFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I create a flowchart diagram with mermaid-diagrams?
Mermaid Diagrams lets you create flowcharts using simple markdown syntax. Define nodes with text labels, connect them with arrows, and specify shapes (rectangles, diamonds, circles) to represent different elements. You can style colors, add notes, and render interactive diagrams directly in your documentation or web applications.
What diagram types does mermaid-diagrams support?
Mermaid Diagrams supports flowcharts, sequence diagrams, class diagrams, entity-relationship diagrams, Gantt charts, state diagrams, mindmaps, git graphs, user journey maps, and pie charts. Each type uses Mermaid markdown syntax, allowing you to define complex visual documentation programmatically without manual drawing tools.
How to make sequence diagrams with mermaid-diagrams?
Mermaid Diagrams enables sequence diagram creation by defining actors and their interactions in order. Specify participants, message flows between them, and optional notes. The syntax is straightforward—list actors, then describe messages with arrows to show timing and dependencies in your system interactions.
Can mermaid-diagrams generate ER diagram visualization?
Yes, Mermaid Diagrams generates entity-relationship diagrams using Mermaid syntax. Define entities, their attributes, and relationships with cardinality notation. This allows you to visualize database schemas and data models directly from code, making it easy to document and share your data architecture.
How do I integrate mermaid-diagrams into React applications?
Mermaid Diagrams can be integrated into React by rendering Mermaid markdown syntax within your components. Pass diagram definitions as strings, and the library renders them as SVG visualizations. This enables dynamic diagram generation based on application state or data, supporting interactive documentation within your React apps.
What is the mermaid-diagrams license and syntax reference?
Mermaid Diagrams is released under the MIT license, making it free for commercial and personal use. The skill includes full syntax reference and best practices for all supported diagram types, helping you learn Mermaid markdown and create professional visual documentation efficiently.
SKILL.md
rendered from the published skill — quoted content, verbatim
Mermaid Diagrams
Create diagrams and visualizations using Mermaid markdown syntax.
Quick Reference
Mermaid diagrams are written in markdown code blocks with mermaid as the language identifier.
Flowchart
flowchart TD
A[Start] --> B{Is it valid?}
B -->|Yes| C[Process data]
B -->|No| D[Show error]
C --> E[Save to database]
D --> F[Return to input]
E --> G[End]
F --> A
Flowchart Syntax
``` flowchart TD %% TD = top-down, LR = left-right, RL, BT A[Rectangle] %% Square brackets = rectangle B(Rounded) %% Parentheses = rounded rectangle C{Diamond} %% Curly braces = diamond/decision D[[Subroutine]] %% Double brackets = subroutine E[(Database)] %% Cylinder shape F((Circle)) %% Double parentheses = circle
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
workflows/talk-to-slidev-workflow/.claude/skills/mermaid-diagrams/SKILL.md