Menu

Individual skill

mermaid-diagram-builder

Creates clear, valid, version-controllable diagrams as code using Mermaid — flowcharts, sequence diagrams, ER diagrams, class diagrams, state machines, Gantt charts, C4/architecture diagrams, and more. Use this skill when the user asks to "draw a diagram", "make a flowchart", "create a sequence diagram", "diagram this architecture", "visualize this process/data model/API flow", "show the ER diagram", "render Mermaid", "diagram as code", or wants a chart embeddable in Markdown, GitHub, Notion, or docs. Covers picking the right diagram type, writing syntactically correct Mermaid, styling, and validating that it renders.

mermaid-diagram-builder/SKILL.md

Read pinned source

Source commit f9a456bf34c297bd23fb234f410ec9b239ebed14

What was checked

Matches the observed repository HEAD
Yes
Scanner rules are current
Yes
Repository scan complete
No
Skill scan complete
No
Observed behavior
Network or broad shell
Last checked
Nov 6, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings)
12
Repository last updated
Oct 14, 2026
License
MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files
Read excerpt

# Mermaid Diagram Builder

## Overview
Mermaid is a text-based diagramming language that renders to SVG. Because diagrams are plain text, they live in version control, diff cleanly in PRs, and render natively on GitHub, GitLab, Notion, Obsidian, VS Code, and most Markdown tools.

This skill helps you (1) pick the correct diagram type for the user's intent, (2) write valid, idiomatic Mermaid, (3) style it for clarity, and (4) verify it renders before delivering.

Keywords: mermaid, diagram, flowchart, sequence diagram, ER diagram, entity relationship, class diagram, state diagram, gantt, C4, architecture, diagram as code, graphviz alternative, markdown diagram.

## Workflow
1. **Clarify intent.** Determine what the user is modeling: a *process/decision* (flowchart), an *interaction over time* (sequence), a *data model* (ER), an *object structure* (class), *lifecycle states* (state), a *schedule* (gantt), or a *system's components* (C4/architecture). If ambiguous, ask one targeted question or pick the best fit and say why. See `references/diagram-types.md` for the selection guide.
2. **Choose the diagram type** using the decision table in `references/diagram-types.md`.
3. **Draft the Mermaid code** following the syntax patterns in `references/syntax-cheatsheet.md`. Start with the header keyword (e.g. `flowchart TD`), then nodes/relationships, then styling last.
4. **Apply clarity conventions** (direction, concise labels, grouping with subgraphs, consistent node shapes). See Best Practices below.