SuperAPI AI 工具集

mermaid-diagrams

设计与创作

查看项目

更新于 10-16 00:03

技能介绍

用途:为架构文档提供可移植的 Mermaid.js 图表绘制能力,不绑定任何博客平台、主题或渲染引擎。图表可通过 CLI 渲染、嵌入 Markdown 或作为 HTML 片段提供。

主要能力:支持流程图、时序图、类图、状态图、ER 图、块图、数据包图、C4、甘特图等类型。C4 原生语法在 GitHub 等渲染器不受支持,需改用流程图近似或 Structurizr DSL。

使用方式:CLI 渲染用 npx @mermaid-js/mermaid-cli -i diagram.mmd -o diagram.svg;也可用 Docker 镜像 ghcr.io/mermaid-js/mermaid-cli。HTML 内联渲染通过 CDN 引入 mermaid.min.js 并初始化。PDF 输出需预渲染:将 .mmd 转为 SVG 后直接嵌入 Markdown,并去除 max-width 像素值,使用 flowchart TD 纵向布局。

适用场景:架构上下文与容器视图、交互流程、流程文档、规格说明、项目时间线等,需同时面向智能体与人类阅读的图表。

限制:C4 原生语法在 GitHub 渲染为原始代码;PDF 管线不执行 JavaScript,mermaid 代码块不会渲染;mmdc 依赖 Puppeteer 与 Chromium(约 1.7GB);关键词大小写敏感,避免混用制表符与空格,超宽图建议拆分或使用 ELK 布局。