creating-mermaid-diagrams
Create and validate Mermaid diagrams across multiple types—flowcharts for processes, sequence diagrams for system interactions, class and state diagrams for object models and lifecycles, ER diagrams for data relationships, and other specialized formats like Gantt charts. The skill preserves editable source while optionally rendering static SVG assets when needed for documents or slides.
Creating Mermaid Diagrams lets you build and validate flowcharts, sequence diagrams, and data models in editable source format.
AI-generated summary based on this skill's SKILL.md
Install
narumiruna/skills/creating-mermaid-diagrams · repository language: Python
git clone https://github.com/narumiruna/skills
cp -r skills/skills/slides-visuals/creating-mermaid-diagrams ~/.claude/skills/creating-mermaid-diagramsFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I create a mermaid diagram?
Creating-mermaid-diagrams lets you build diagrams using Mermaid's text-based syntax. Start by defining your diagram type (flowchart, sequence, class, ER, state, Gantt, or others), then write the source code describing nodes, connections, and labels. The skill supports validation to catch syntax errors before rendering, ensuring your diagram structure is correct.
What diagram types can creating-mermaid-diagrams generate?
Creating-mermaid-diagrams supports flowcharts for processes, sequence diagrams for system interactions, class diagrams for object models, state diagrams for lifecycles, ER diagrams for data relationships, Gantt charts for timelines, mindmaps, and C4 diagrams for architecture. Each type uses Mermaid's declarative syntax to define structure and relationships.
How do I convert an existing diagram to mermaid format?
Creating-mermaid-diagrams helps you translate diagrams from other formats into Mermaid syntax. Analyze your original diagram's structure, identify its type (flowchart, sequence, etc.), then rewrite it using Mermaid's text-based language. The skill validates the converted syntax and can render it to verify the result matches your original.
Can creating-mermaid-diagrams render mermaid to SVG or images?
Yes. Creating-mermaid-diagrams can render Mermaid source code to static SVG or image formats suitable for documents and slides. This lets you preserve the editable source separately while generating static assets for distribution or embedding in presentations and reports.
How does creating-mermaid-diagrams validate mermaid syntax?
Creating-mermaid-diagrams checks your Mermaid source code against the language specification to catch syntax errors, missing connections, or invalid node definitions. Validation runs before rendering, helping you fix issues early and ensuring diagrams render correctly without runtime failures.
What are mermaid diagram best practices for creating-mermaid-diagrams?
Creating-mermaid-diagrams works best when you keep diagrams focused on a single concept, use clear node labels, maintain consistent naming conventions, and organize connections logically. Validate syntax early, test rendering in your target format (SVG or image), and preserve source code separately from static outputs for future edits.
SKILL.md
rendered from the published skill — quoted content, verbatim
Mermaid Diagrams
Preserve editable Mermaid source. Render a static asset only when the consumer requires one.
Route by Structure
| Type | Best for | Reference | Example |
|---|---|---|---|
| Flowchart | processes and decisions | references/flowchart.md |
assets/examples/flowchart/basic.mmd |
| Sequence | ordered system interactions | references/sequence.md |
assets/examples/sequence/basic.mmd |
| Class | object models | references/class.md |
assets/examples/class/basic.mmd |
| State | lifecycle transitions | references/state.md |
assets/examples/state/basic.mmd |
| ER | data entities and relationships | references/er.md |
assets/examples/er/basic.mmd |
| Other | Gantt, pie, git, journey, timeline, mindmap, requirement, C4 | references/other-types.md |
assets/examples/other/gantt-basic.mmd |
Load only the matching reference.
Workflow
- Identify the relationships, sequence, or states the diagram must communicate and choose
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 14 files
skills/slides-visuals/creating-mermaid-diagrams/SKILL.md
skills/slides-visuals/creating-mermaid-diagrams/agents/openai.yaml
skills/slides-visuals/creating-mermaid-diagrams/assets/examples/class/basic.mmd
skills/slides-visuals/creating-mermaid-diagrams/assets/examples/er/basic.mmd
skills/slides-visuals/creating-mermaid-diagrams/assets/examples/flowchart/basic.mmd
skills/slides-visuals/creating-mermaid-diagrams/assets/examples/other/gantt-basic.mmd
skills/slides-visuals/creating-mermaid-diagrams/assets/examples/sequence/basic.mmd
skills/slides-visuals/creating-mermaid-diagrams/assets/examples/state/basic.mmd
skills/slides-visuals/creating-mermaid-diagrams/references/class.md
skills/slides-visuals/creating-mermaid-diagrams/references/er.md
skills/slides-visuals/creating-mermaid-diagrams/references/flowchart.md
skills/slides-visuals/creating-mermaid-diagrams/references/other-types.md
skills/slides-visuals/creating-mermaid-diagrams/references/sequence.md
skills/slides-visuals/creating-mermaid-diagrams/references/state.md