mermaid-diagrams by davila7/claude-code-templates
npx skills add https://github.com/davila7/claude-code-templates --skill mermaid-diagrams使用 Mermaid 基于文本的语法创建专业的软件图表。Mermaid 根据简单的文本定义渲染图表,使图表可版本控制、易于更新,并能与代码一同维护。
所有 Mermaid 图表都遵循以下模式:
diagramType
definition content
关键原则:
classDiagram、sequenceDiagram、flowchart)%% 进行注释选择合适的图表类型:
类图 - 领域建模、面向对象设计、实体关系
- 时序交互、消息流
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
流程图 - 流程、算法、决策树
实体关系图 - 数据库模式
C4 图 - 多层次的软件架构
状态图 - 状态机、生命周期状态
Git 图 - 版本控制分支策略
甘特图 - 项目时间线、调度
饼图/条形图 - 数据可视化
classDiagram
Title -- Genre
Title *-- Season
Title *-- Review
User --> Review : creates
class Title {
+string name
+int releaseYear
+play()
}
class Genre {
+string name
+getTopTitles()
}
sequenceDiagram
participant User
participant API
participant Database
User->>API: POST /login
API->>Database: Query credentials
Database-->>API: Return user data
alt Valid credentials
API-->>User: 200 OK + JWT token
else Invalid credentials
API-->>User: 401 Unauthorized
end
flowchart TD
Start([User visits site]) --> Auth{Authenticated?}
Auth -->|No| Login[Show login page]
Auth -->|Yes| Dashboard[Show dashboard]
Login --> Creds[Enter credentials]
Creds --> Validate{Valid?}
Validate -->|Yes| Dashboard
Validate -->|No| Error[Show error]
Error --> Login
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
PRODUCT ||--o{ LINE_ITEM : includes
USER {
int id PK
string email UK
string name
datetime created_at
}
ORDER {
int id PK
int user_id FK
decimal total
datetime created_at
}
关于特定图表类型的深入指导,请参阅:
%% 注释来解释复杂关系.mmd 文件与代码一起存储以便于更新使用 frontmatter 配置图表:
---
config:
theme: base
themeVariables:
primaryColor: "#ff6b6b"
---
flowchart LR
A --> B
可用主题: default, forest, dark, neutral, base
布局选项:
layout: dagre (默认)- 经典的平衡布局layout: elk - 用于复杂图表的进阶布局(需要集成)外观选项:
look: classic - 传统的 Mermaid 风格look: handDrawn - 类似草图的外观原生支持:
导出选项:
npm install -g @mermaid-js/mermaid-cli 然后 mmdc -i input.mmd -o output.pngdocker run --rm -v $(pwd):/data minlag/mermaid-cli -i /data/input.mmd -o /data/output.png{},对特殊字符使用正确的转义序列在以下情况下始终绘制图表:
使用图表来:
每周安装次数
274
仓库
GitHub 星标数
22.6K
首次出现
2026年1月25日
安全审计
安装于
opencode231
gemini-cli212
claude-code206
codex201
github-copilot188
cursor168
Create professional software diagrams using Mermaid's text-based syntax. Mermaid renders diagrams from simple text definitions, making diagrams version-controllable, easy to update, and maintainable alongside code.
All Mermaid diagrams follow this pattern:
diagramType
definition content
Key principles:
classDiagram, sequenceDiagram, flowchart)%% for commentsChoose the right diagram type:
Class Diagrams - Domain modeling, OOP design, entity relationships
Sequence Diagrams - Temporal interactions, message flows
Flowcharts - Processes, algorithms, decision trees
Entity Relationship Diagrams (ERD) - Database schemas
C4 Diagrams - Software architecture at multiple levels
State Diagrams - State machines, lifecycle states
Git Graphs - Version control branching strategies
Gantt Charts - Project timelines, scheduling
Pie/Bar Charts - Data visualization
classDiagram
Title -- Genre
Title *-- Season
Title *-- Review
User --> Review : creates
class Title {
+string name
+int releaseYear
+play()
}
class Genre {
+string name
+getTopTitles()
}
sequenceDiagram
participant User
participant API
participant Database
User->>API: POST /login
API->>Database: Query credentials
Database-->>API: Return user data
alt Valid credentials
API-->>User: 200 OK + JWT token
else Invalid credentials
API-->>User: 401 Unauthorized
end
flowchart TD
Start([User visits site]) --> Auth{Authenticated?}
Auth -->|No| Login[Show login page]
Auth -->|Yes| Dashboard[Show dashboard]
Login --> Creds[Enter credentials]
Creds --> Validate{Valid?}
Validate -->|Yes| Dashboard
Validate -->|No| Error[Show error]
Error --> Login
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
PRODUCT ||--o{ LINE_ITEM : includes
USER {
int id PK
string email UK
string name
datetime created_at
}
ORDER {
int id PK
int user_id FK
decimal total
datetime created_at
}
For in-depth guidance on specific diagram types, see:
%% comments to explain complex relationships.mmd files alongside code for easy updatesConfigure diagrams using frontmatter:
---
config:
theme: base
themeVariables:
primaryColor: "#ff6b6b"
---
flowchart LR
A --> B
Available themes: default, forest, dark, neutral, base
Layout options:
layout: dagre (default) - Classic balanced layoutlayout: elk - Advanced layout for complex diagrams (requires integration)Look options:
look: classic - Traditional Mermaid stylelook: handDrawn - Sketch-like appearanceNative support in:
Export options:
npm install -g @mermaid-js/mermaid-cli then mmdc -i input.mmd -o output.pngdocker run --rm -v $(pwd):/data minlag/mermaid-cli -i /data/input.mmd -o /data/output.png{} in comments, use proper escape sequences for special charactersAlways diagram when:
Use diagrams to:
Weekly Installs
274
Repository
GitHub Stars
22.6K
First Seen
Jan 25, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode231
gemini-cli212
claude-code206
codex201
github-copilot188
cursor168
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
106,200 周安装