词映 AI导航
工具库Skills 技能
我的收藏
词映 AI导航

Claude Code mermaid-diagrams for readable project flowcharts

Choose clear nodes, edges, and theme-safe styling, then verify that Mermaid renders in the intended documentation.

中文

Install in Claude Code

Provide the source workflow and a documentation preview in Claude Code. Check the diagram in the target viewer or a local Mermaid renderer.

  1. Review `.claude/skills/mermaid-diagrams/SKILL.md` and its requirements at the pinned GitHub commit.
  2. Create `.claude/skills/mermaid-diagrams/` in your project and save the reviewed file as `.claude/skills/mermaid-diagrams/SKILL.md`.
  3. Start Claude Code from that project's root, then select `/mermaid-diagrams` in the slash menu.

Example task

Flow diagram-21 has [Collect requests, Review details, Export summary]. A notification after export is optional.

What to check

Keep [Collect requests, Review details, Export summary] on solid primary edges and connect the optional notification with a dotted edge. Quote labels and verify both themes.

Original SKILL.md on GitHub · Updated

Frequently asked question

What should I check after a Mermaid parser error?

Check label quotes, empty nodes, and edge syntax first. Use common constructs and validate in the intended renderer.