Draw mermaid diagrams
Cursor agent workflow pack: Spec state machine, ContextPack, and deterministic gates for deep research.
npx -y skills add JunfengRan/dev-env --skill draw-mermaid-diagramsAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
2 things to look at
- 13 days oldThe repository was created 13 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
- 1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
在 Markdown 文档中绘制或修复 Mermaid 图,确保 GitHub 可渲染。 触发:用户要求画图、修复 Mermaid 渲染错误、为文档添加架构/序列/状态图, 或提到 mermaid、流程图、时序图、CI 验证图表。
SKILL.md
1.6 KB, as published. Nobody here has run it
绘制 GitHub 兼容的 Mermaid 图
在 dev-env 仓库的 Markdown 中编写 Mermaid 时,遵循本 skill,并在提交前运行验证。
工作流
- 确定图类型:flowchart / sequenceDiagram / stateDiagram-v2 / erDiagram / gantt
- 按兼容性规则编写(见下文)
- 本地验证:
npm run validate:mermaid - 提交:CI 工作流
.github/workflows/validate-mermaid.yml会自动复检
GitHub 兼容性规则(必须遵守)
通用
| 规则 | 说明 |
|---|---|
| 节点 ID | 用 camelCase,无空格:userService,不用 user_service |
| 保留字 | 不用 end、subgraph、graph、loop 作节点/参与者 ID |
| 特殊字符 | @ / ( ) # 等必须包在引号内:A["@scope/pkg"] |
| 多词标签 | 一律加引号:B["AI SDK streamText"] |
| 不用 emoji | GitHub 渲染器可能拒绝 |
不用 \n | 用实际换行或缩短标签,勿写 \n 转义 |
flowchart
- 边标签含特殊字符时加引号
- subgraph 标题加引号
- 避免
@pkg/name裸写在[]内
sequenceDiagram
- 参与者 ID 不能与
loop/alt等关键字冲突 - 多词显示名必须引号
验证命令
npm install
npm run validate:mermaid
npm run validate:mermaid -- --render
输出格式
```mermaid
flowchart LR
A[Step A] --> B[Step B]
```