mermaid-diagram-pro

用途

mermaid-diagram-pro 是一个面向 2026 年的可视化架构与文档工程技能，专注于 Mermaid.js 编排、Diagram-as-Code（DaC）工作流以及自动化系统行为建模。它用于在技术文档与项目协作中，以代码形式生成和维护图表，可视化复杂逻辑、数据流与项目时间线。

主要能力

图表类型选择：根据信息类型选择合适图表，例如逻辑用 Flowchart、交互用 Sequence、数据用 ERD、工作流用 Gitgraph。
上下文提取：从代码库中收集必要技术细节，如符号、状态转换、关系基数。
高保真时序建模：支持 autonumber、activate/deactivate 与 Note，使交互显式化，并将每条消息映射到具体函数调用或网络请求。
精确实体关系建模：使用 Crow's Foot 表示法，包含数据类型与 PK/FK 标识，并可从 Prisma/Drizzle schema 直接派生 ERD 以减少偏差。
Gitflow 与工作流可视化：对涉及复杂分支或 rebase 逻辑的 PR 描述使用 Gitgraph，示例中统一采用 main、develop、feature/* 分支命名。
验证：渲染 Mermaid 代码并检查逻辑一致性与视觉清晰度。

使用方式

技能内部描述了一套“指挥协议”：先进行视觉逻辑映射，判断哪种图表类型最能表达信息；再进行上下文提取，从代码库收集技术细节；随后按顺序激活技能：activate_skill(name="mermaid-diagram-pro") → activate_skill(name="docs-pro") → activate_skill(name="c4-architect")；最后渲染并验证。

资料中给出的实现模式包括：

高级时序图（交互逻辑）：

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

实体关系图（数据库 schema）：

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（分支策略）：

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"

强制规范（2026 标准）

Diagram-as-Code（DaC）完整性：图表必须纳入版本控制；技术文档不得使用静态图片，始终在 Markdown 中使用原始 Mermaid 语法；复杂、可复用的图表存放在 assets/ 目录下的 .mermaid 文件中。
高保真时序建模：使用 autonumber、activate/deactivate 与 Note 使交互显式；将时序图中的每条消息映射到代码中的具体函数调用或网络请求。
精确实体关系建模（ERD）：使用 Crow's Foot 表示关系；始终包含数据类型与 PK/FK 标识；尽可能从 Prisma/Drizzle schema 直接派生 ERD 以确保零偏差。
Gitflow 与工作流可视化：对所有涉及复杂分支或 rebase 逻辑的 PR 描述使用 Gitgraph；示例中统一采用 main、develop、feature/* 分支命名。

反模式（Do Not List）

不要创建超过 20 个节点且没有分组或子图的图表。
不要对关键路径使用默认颜色，应使用自定义样式突出显示。
如可避免，不要编写会在流程图中产生“交叉线”的 Mermaid 语法（使用 LR 与 TD 的取舍）。
不要忽略可访问性，应为屏幕阅读器提供图表含义的文本摘要。
不要将时序图中的参与者保留为 Agent1 之类的通用名称，应使用其具体专家头衔。

深入主题

资料列出以下进阶方向：高级时序模式（Loops、Alt 与 Parallel 交互）、ERD 最佳实践（复杂关系与数据类型建模）、面向 DevOps 的 Gitgraph（发布周期与 CI/CD 流程可视化）、样式与主题（自定义颜色、字体与布局引擎）。

专用工具与脚本

scripts/verify-mermaid.sh：检查 Mermaid 语法并检测断链。
scripts/schema-to-erd.ts：从 Prisma schema 生成 Mermaid ERD。

学习资源

资料列出：Mermaid.js 官方文档、Diagramming as Code in 2026、Visualizing Software Architecture。

适用场景与限制

适用场景包括技术文档编写、系统行为建模、数据库 schema 可视化、分支与发布流程说明，以及需要将图表纳入版本控制的团队协作。限制方面，资料未提供收费、价格、平台支持范围、具体安装命令或运行环境要求等信息，暂未提供。