---
id: narumiruna/skills/creating-mermaid-diagrams
version: "a62048e7"
license: MIT
install: manual
updated: 2026-07-27
---

# 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.

Publisher: narumiruna · Stars: 8 · Updated: 2026-07-27

Install (manual): `git clone https://github.com/narumiruna/skills`

## SKILL.md

# 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

1. Identify the relationships, sequence, or states the diagram must communicate and choose the matching type.
2. Write one focused `.mmd` source with descriptive labels and simple alphanumeric or underscore IDs. Split a graph that becomes unreadable.
3. Validate with the consumer's Mermaid renderer when known. Otherwise, use Mermaid CLI when available:

```shell
mmdc -i diagram.mmd -o /tmp/diagram-check.svg
```

4. If a slide or document needs a static asset, render the requested SVG with an appropriate theme, background, and dimensions, then inspect it in the target artifact.
5. Return or preserve the source, any requested rendered artifact, validation performed, and renderer/version compatibility caveats.

Quote labels containing punctuation. Prefer high contrast for slides. Diagram creation does not authorize a Git commit or publication.


[View on SkillFed](https://skillfed.io/narumiruna/skills/creating-mermaid-diagrams) · [View on GitHub](https://github.com/narumiruna/skills)