跳到正文
cccskills
免费在 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.

中文简介正在准备中。当前显示英语简介。

原文查看原文说明

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-architecture星标 3,606(GitHub 3,606 + cccskills 0)

实测评分 未实测

查看安装方法

适用场景

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

包含的文件(1)

  • SKILL.md2.5 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

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

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

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-architecture36062026年10月23日 更新

loopx

免费

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-architecture36062026年10月23日 更新

pm

免费

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-architecture36062026年10月23日 更新

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-architecture36062026年10月23日 更新

ship

免费

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-architecture36062026年10月23日 更新

查看 puncsky 的全部技能

报告此技能的问题