mcpField
M
mermaid-diagrams

mermaid-diagrams

github.com/sammcj设计与 UI167121 次安装3 天前更新
代码仓库

关于 mermaid-diagrams

为 Mermaid 图表编写提供格式和样式规范，面向需要生成流程图、状态图和类图的用户。指南涵盖特殊标签的引号规则、换行及配色定义。

主要功能

  1. 01特殊字符标签的引号规则
  2. 02图表标签换行规范
  3. 03流程图、状态图和类图主题
  4. 04可复用的颜色类别定义

适用场景

  1. 01编写包含括号的图表标签
  2. 02统一 Mermaid 图表的配色
  3. 03整理流程、状态或类图

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/sammcj/agentic-coding --skill mermaid-diagrams

安装后在 Claude Code 中输入/mermaid-diagrams确认已加载。

详细介绍

Mermaid 图表绘制指南

  • 包含括号或其他特殊字符的标签需用双引号括起来，例如 id1["Send request (POST)"]；未加引号的括号会导致解析失败
  • 使用 <br> 代替 \n 换行
  • Mermaid 不支持在项目标签中使用无序列表
  • 除非另有说明，流程图、状态图和类图均应用此配色主题：
classDef inputOutput fill:#F5F5F5,stroke:#9E9E9E,color:#616161
classDef llm fill:#E8EAF6,stroke:#7986CB,color:#3F51B5
classDef components fill:#F3E5F5,stroke:#BA68C8,color:#8E24AA
classDef process fill:#E0F2F1,stroke:#4DB6AC,color:#00897B
classDef stop fill:#FFEBEE,stroke:#E57373,color:#D32F2F
classDef data fill:#E3F2FD,stroke:#64B5F6,color:#1976D2
classDef decision fill:#FFF3E0,stroke:#FFB74D,color:#F57C00
classDef storage fill:#F1F8E9,stroke:#9CCC65,color:#689F38
classDef api fill:#FFF9C4,stroke:#FDD835,color:#F9A825
classDef error fill:#FFCDD2,stroke:#EF5350,color:#C62828

评论

支持 Markdown