1. Habit
  2. Skills
  3. Mermaid Diagrams skill
softaworks · 5K installs

Mermaid Diagrams skill
Runs by itself, structure or flow changes.

Keep diagrams matched to the code.

Install the Mermaid Diagrams skill and make it a habit: follow https://gethabit.dev/skills/softaworks/mermaid-diagrams.md

  1. 1Copy
  2. 2Paste into Claude Code, Codex or Cursor
  3. 3It runs by itself

5K installs3K starsMIT licenceSource on GitHub ↗

Mermaid Diagrams

by softaworks · 5K installs

The skill

The mermaid diagrams skill creates software diagrams in Mermaid syntax: class, sequence, flowchart, ERD, C4, state, git graph, gantt and charts, with type selection, theming and export through the Mermaid CLI.

Only when you ask.

The habit

Keep diagrams matched to the code.

↻ Runs by itselfstructure or flow changes

How the habit works.
You don't have to.

Three questionsWhen does it start? How does it check its work? What does it remember?

01

It starts by itself

structure or flow changes. Runs in Claude Code routine.

  • ↻ structure or flow changes
  • pull request changes models, schemas, APIs or architecture docs

02

It checks its work

diagrams render cleanly. If a check fails, it tries again.

  • ✓mmdc -i input.mmd -o output.png succeeds for each changed diagram
  • ✓the first line declares a diagram type
  • ✓output file exists

03

It remembers

diagram files in git. The next run reads it first: which .mmd files cover which parts of the code.

loops/mermaid-docs-diagram-loop/diagrams.md

One run, step by step.
Then it stops.

Stop ruleStops after the changed diagrams and 2 render retries each.

  1. 01

    Find the change

    Your agent sees which models, flows or services changed.

  2. 02

    Pick a type

    It chooses class, sequence, flowchart, ERD, C4, state or other diagrams per the selection guide.

  3. 03

    Update the source

    It edits the .mmd file, adding %% comments for complex links.

  4. 04

    Split if large

    It splits crowded diagrams into focused views.

  5. 05

    Render

    It renders with mmdc to catch syntax errors, using references/advanced-features.md for themes.

What it may do.
Nothing more.

Safe by defaultIt writes only in its own folder and asks you before anything goes out.

Is it for you?
Use it when it fits.

Quick checkRead both lists. If the left one sounds like you, the Mermaid Diagrams skill helps.

Use it when

  • ✓ You document system architecture
  • ✓ You design a database schema
  • ✓ You map an API or user flow

Skip it when

  • – You need pixel-perfect design graphics
  • – Your docs tool cannot render Mermaid

Questions

Mermaid Diagrams skill, answered.

Where do diagrams render?

GitHub, GitLab, VS Code with an extension, Notion, Obsidian and Confluence.

Why do my diagrams break silently?

Unknown words break diagrams and bad parameters fail without errors.

How do I install the Mermaid Diagrams skill?

Copy the prompt at the top into your agent. It installs the skill from softaworks/agent-toolkit and sets up the habit. Or run npx skills add softaworks/agent-toolkit --skill mermaid-diagrams.

Is the Mermaid Diagrams skill free?

Yes. It is published under MIT. Habit is free too.

Mermaid Diagrams. Now as a habit.

Install the Mermaid Diagrams skill and make it a habit: follow https://gethabit.dev/skills/softaworks/mermaid-diagrams.md

  • Free
  • No account
  • Undo in one line

All softaworks skills →More docs skills →

Works in

  • Claude Code
  • Codex
  • Cursor
  • ChatGPT
  • Claude app

Made by softaworks, published under MIT. Habit links to the original and never changes it. Is this your skill?

Copying didn't work here. Select the line and copy it by hand.