Skip to content
cccskills
FreePublished on GitHub

mermaid

Create concise Mermaid architecture diagrams from a chapter, system, component, dependency flow, or supplied description. The skill checks the diagram syntax before presenting the diagram and a brief explanation of its key flow.

OriginalShow the original description

Create concise, syntax-verified Mermaid architecture diagrams. Use when the user asks to diagram a chapter topic, system, component, dependency flow, or supplied description in Mermaid.

puncsky/system-design-and-architecture3,606 stars(GitHub 3,606 + cccskills 0)

Run score Not tested

See how to install

Good for

  • Diagramming a system or its components
  • Showing dependency and call directions
  • Turning a chapter topic into a diagram

Files included (1)

  • SKILL.md2.5 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Draw a mermaid architecture diagram in markdown for: $ARGUMENTS

Conventions

  • Boxes are services/components: svc[api-gateway]. Use [(...)] for datastores, [[...]]-style queues only if the chapter does. Humans (user, operator) are triangles: user@{ shape: tri, label: "user" }.
  • A box that is not a long-running service must say so in its label (cron["nightly compaction job (spawned, exits when done)"]). Never draw a manual procedure as a peer of running infrastructure; give it its own subgraph titled as manual.
  • Arrows are dependency direction: A --> B means A calls/reads/writes B — never the reverse. Label an edge (A -->|gRPC| B) only when the relationship isn't obvious.
  • Concise: only load-bearing components and edges. No styling, colors or legend. Default flowchart TB; LR only if much wider than deep. subgraph only for real boundaries (region, cluster, trust zone, sync vs. async path).
  • If $ARGUMENTS refers to a chapter in this book, read it first (en/<file>.md) — don't diagram from guesswork. Keep names consistent with the chapter's prose.

Syntax gotchas: quote labels containing (, ), [, { (a["Queue (SQS)"]); never name a node bare end or graph; quote subgraph titles with spaces.

Verify (mandatory, before answering)

  1. Write the diagram body (no fence) to a unique .mmd file under .agents/tmp/ (gitignored).
  2. Run npx -y @mermaid-js/mermaid-cli@11.16.0 -i <file>.mmd -o <file>.svg; exit 0 means valid. The version is pinned deliberately (supply chain) — bump consciously.
  3. On failure, fix and re-verify. Never output an unverified diagram.

Output

A single ```mermaid fenced block plus a short explanation of the key flow. If asked to put it in a file, insert the verified block there.

Book caveat: the GitBook build (gitbook-cli, Node 10) does not render Mermaid fences by default. For published chapters, either render the verified .mmd to an image under images/ (-o images/<name>.svg, referenced as ../images/<name>.svg) or confirm a Mermaid plugin is enabled in book.json before leaving a raw fence in a chapter. Mirror the diagram in both en/ and zh-CN/ (translate labels only).

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Answer questions about a book, its chapters, or system design by consulting relevant material without changing files. For repository questions, ground the response in the source and cite file paths and lines; use web search for general topics when freshness matters.

  • Asking about a book or chapter
  • Getting an explanation of system design
  • Checking repository material without edits
puncsky/system-design-and-architecture3.6KUpdated Oct 23, 2026

loopx

FreeSummary

Work through a `.pm` workstream backlog one actionable item at a time. Triage pending milestones, tasks, and inbox notes, then implement and ship them, close items already satisfied, block work with an unblock condition, or remove invalid items until no actionable work remains.

  • Draining a workstream backlog
  • Reviewing pending milestones and tasks
  • Resolving open inbox notes
puncsky/system-design-and-architecture3.6KUpdated Oct 23, 2026

pm

FreeSummary

Manage and inspect a book project's public work board: organize workstreams, notes, milestones, and tasks, and update their status as work changes. Use it to materialize proposals, track blockers, or check current board state.

  • Check open milestones, tasks, and blockers
  • Add a roadmap note or milestone to the board
  • Mark completed or blocked work
puncsky/system-design-and-architecture3.6KUpdated Oct 23, 2026

pm-brainstorm

FreeSummary

Break down a book roadmap topic into prioritized milestone and task proposals, considering reader impact, scope, dependencies, and effort. The skill outputs text for a separate board workflow to apply; it does not write board files.

  • Turn a book improvement idea into milestone proposals
  • Prioritize roadmap work by reader impact
  • Break a goal into sized tasks with dependencies
puncsky/system-design-and-architecture3.6KUpdated Oct 23, 2026

ship

FreeSummary

Prepare pending changes on the tracked working branch for publishing: check the branch and repository state, rebase on the latest origin changes, commit selected files, and push. It is intended for an explicit ship or publish request.

  • Publish finished changes from the current branch
  • Commit and push selected pending files
  • Update the branch with origin before shipping
puncsky/system-design-and-architecture3.6KUpdated Oct 23, 2026

See all skills by puncsky

Report a problem with this skill