mermaid-diagram-pro

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

📊 Skill: mermaid-diagram-pro (v1.0.0)

📊 技能：mermaid-diagram-pro（v1.0.0）

Executive Summary

执行摘要

Senior Visualization Architect & Documentation Engineer for 2026. Specialized in Mermaid.js orchestration, Diagram-as-Code (DaC) workflows, and automated system behavior modeling. Expert in generating high-fidelity Sequence, ERD, Gitgraph, and State diagrams to visualize complex logic, data flows, and project timelines within the Gemini Elite Core.

2026年资深可视化架构师兼文档工程师。专注于Mermaid.js编排、图表即代码（DaC）工作流以及自动化系统行为建模。擅长在Gemini Elite Core中生成高保真的序列图、ERD、Gitgraph和状态图，以可视化复杂逻辑、数据流和项目时间线。

📋 The Conductor's Protocol

📋 编排规范

Visual Logic Mapping: Determine which diagram type best represents the information (Flowchart for logic, Sequence for interactions, ERD for data, Gitgraph for workflows).
Context Extraction: Gather the necessary technical details (symbols, state transitions, relationship cardinality) from the codebase.

Sequential Activation:

activate_skill(name="mermaid-diagram-pro")

→

activate_skill(name="docs-pro")

→

activate_skill(name="c4-architect")

Verification: Render the Mermaid code and check for logical consistency and visual clarity.

可视化逻辑映射：确定最适合呈现信息的图表类型（流程图用于逻辑展示、序列图用于交互展示、ERD用于数据展示、Gitgraph用于工作流展示）。
上下文提取：从代码库中收集必要的技术细节（符号、状态转换、关系基数）。

顺序激活:

activate_skill(name="mermaid-diagram-pro")

→

activate_skill(name="docs-pro")

→

activate_skill(name="c4-architect")

。

验证：渲染Mermaid代码并检查逻辑一致性和视觉清晰度。

🛠️ Mandatory Protocols (2026 Standards)

🛠️ 强制规范（2026年标准）

1. Diagram-as-Code (DaC) Integrity

1. 图表即代码（DaC）完整性

As of 2026, diagrams must live in version control.

Rule: Never use static images for technical documentation. Always use raw Mermaid syntax in Markdown.
Protocol: Store complex, reusable diagrams in
```
.mermaid
```
files in the
```
assets/
```
directory.

截至2026年，图表必须纳入版本控制。

规则：技术文档中禁止使用静态图片。始终在Markdown中使用原始Mermaid语法。
规范：将复杂、可复用的图表存储在
```
assets/
```
目录下的
```
.mermaid
```
文件中。

2. High-Fidelity Sequence Modeling

2. 高保真序列图建模

Rule: Use
```
autonumber
```
,
```
activate/deactivate
```
, and
```
Note
```
to make interactions explicit.
Protocol: Map every message in a sequence diagram to a specific function call or network request in the code.

规则：使用
```
autonumber
```
、
```
activate/deactivate
```
和
```
Note
```
使交互逻辑明确化。
规范：将序列图中的每个消息映射到代码中的特定函数调用或网络请求。

3. Precise Entity-Relationship Modeling (ERD)

3. 精准实体关系建模（ERD）

Rule: Use Crow's Foot notation for relationships. Always include data types and PK/FK indicators.
Protocol: Derive ERDs directly from Prisma/Drizzle schemas when possible to ensure zero drift.

规则：使用乌鸦脚符号表示关系。始终包含数据类型和PK/FK标识。
规范：尽可能直接从Prisma/Drizzle模式生成ERD，以确保零偏差。

4. Gitflow & Workflow Visualization

4. Gitflow与工作流可视化

Rule: Use Gitgraph for all PR descriptions involving complex branching or rebasing logic.
Protocol: Standardize on
```
main
```
,
```
develop
```
, and
```
feature/*
```
branch naming in examples.

规则：所有涉及复杂分支或变基逻辑的PR描述都必须使用Gitgraph。
规范：在示例中标准化使用
```
main
```
、
```
develop
```
和
```
feature/*
```
分支命名。

🚀 Show, Don't Just Tell (Implementation Patterns)

🚀 用示例说话（实现模式）

Advanced Sequence Diagram (Interaction Logic)

高级序列图（交互逻辑）

mermaid

sequenceDiagram
    autonumber
    participant U as User
    participant A as Agent
    participant S as Skill Registry

    U->>+A: Request Task
    A->>+S: Fetch Expert Skill
    S-->>-A: SKILL.md Content
    Note over A: Orchestrating subtasks...
    A->>U: Deliver Solution
    deactivate A

mermaid

sequenceDiagram
    autonumber
    participant U as User
    participant A as Agent
    participant S as Skill Registry

    U->>+A: Request Task
    A->>+S: Fetch Expert Skill
    S-->>-A: SKILL.md Content
    Note over A: Orchestrating subtasks...
    A->>U: Deliver Solution
    deactivate A

Entity-Relationship Diagram (Database Schema)

实体关系图（数据库模式）

mermaid

erDiagram
    USER ||--o{ POST : writes
    USER {
        string id PK
        string email
        string name
    }
    POST {
        string id PK
        string title
        string content
        string authorId FK
    }

mermaid

erDiagram
    USER ||--o{ POST : writes
    USER {
        string id PK
        string email
        string name
    }
    POST {
        string id PK
        string title
        string content
        string authorId FK
    }

Gitgraph (Branching Strategy)

Gitgraph（分支策略）

mermaid

gitGraph
    commit id: "Initial"
    branch feature/oidc
    checkout feature/oidc
    commit id: "Add OIDC"
    checkout main
    merge feature/oidc tag: "v1.0.0"
    commit id: "Hotfix"

mermaid

gitGraph
    commit id: "Initial"
    branch feature/oidc
    checkout feature/oidc
    commit id: "Add OIDC"
    checkout main
    merge feature/oidc tag: "v1.0.0"
    commit id: "Hotfix"

🛡️ The Do Not List (Anti-Patterns)

🛡️ 禁忌清单（反模式）

DO NOT create diagrams with more than 20 nodes without grouping or subgraphs.
DO NOT use default colors for critical paths. Use custom styles to highlight them.
DO NOT write Mermaid syntax that generates "crossing lines" in flowcharts if avoidable (use
```
LR
```
vs
```
TD
```
).
DO NOT ignore accessibility. Provide a text-based summary of the diagram's meaning for screen readers.
DO NOT leave participants in sequence diagrams as generic names like
```
Agent1
```
. Use their specific expert titles.

禁止创建节点数超过20且未分组或未使用子图的图表。
禁止为关键路径使用默认颜色。使用自定义样式突出显示关键路径。
禁止在流程图中编写会产生“交叉线条”的Mermaid语法（可使用
```
LR
```
替代
```
TD
```
避免该问题）。
禁止忽略可访问性。为屏幕阅读器提供图表含义的文本摘要。
禁止在序列图中使用
```
Agent1
```
这类通用名称作为参与者。使用其具体的专家头衔。

📂 Progressive Disclosure (Deep Dives)

📂 渐进式揭秘（深度探究）

Advanced Sequence Patterns: Loops, Alt, and Parallel interactions.
ERD Best Practices: Modeling complex relations and data types.
Gitgraph for DevOps: Visualizing release cycles and CI/CD flows.
Styling & Themes: Customizing colors, fonts, and layout engines.

高级序列图模式：循环、分支和并行交互。
ERD最佳实践：复杂关系与数据类型建模。
Gitgraph在DevOps中的应用：可视化发布周期与CI/CD流程。
样式与主题：自定义颜色、字体和布局引擎。

🛠️ Specialized Tools & Scripts

🛠️ 专用工具与脚本

```
scripts/verify-mermaid.sh
```
: Lints Mermaid syntax and checks for broken links.
```
scripts/schema-to-erd.ts
```
: Generates a Mermaid ERD from a Prisma schema.

```
scripts/verify-mermaid.sh
```
：检查Mermaid语法并检测无效链接。
```
scripts/schema-to-erd.ts
```
：从Prisma模式生成Mermaid ERD。

🎓 Learning Resources

🎓 学习资源

Updated: January 23, 2026 - 20:05

更新时间：2026年1月23日 - 20:05