Mermaid 图表

什么是 Mermaid？

Mermaid 是一种基于文本的图表语言。与在可视化工具中拖动形状不同，你编写图表的简短描述，Mermaid 将其渲染为可视化图形。它设计为与代码共存 —— 在 Markdown 文件、wiki 或文档中 —— 因此你的图表保持版本控制且易于更新。

Mermaid 支持多种图表类型：

• 流程图 —— 决策树和流程
• 时序图 —— 系统或服务如何随时间相互调用
• 实体关系（ER）图 —— 数据库 schema
• 架构图 —— 组件及其关系
• 甘特图 —— 时间线和项目计划

实时图表渲染

在 IDE Strip 中打开包含 Mermaid 代码块的任何 .md 文件。Mermaid 块看起来像这样：

```mermaid graph TD A[User] --> B[API Gateway] B --> C[Auth Service] B --> D[User Service] D --> E[(Database)] ```

当 IDE Strip 检测到 Mermaid 块时，它会在源旁边渲染可视化图表面板。你可以同时看到两者：左侧的文本描述和右侧的渲染图表。编辑文本，图表立即更新 —— 无需保存和重新加载步骤。

交互式编辑

这是 1DevTool 的 Mermaid 支持超越标准渲染器的地方。你可以拖动可视化图表中的节点，源代码会自动更新以反映新布局。这在两个方向都有效：

• 编辑文本 → 图表更新 —— 更改标签或在源中添加新连接，查看图表重绘。
• 拖动节点 → 源更新 —— 在可视化图表中移动节点，源代码中相应的位置数据会调整以匹配。

你还可以通过从一个节点的边缘拖动到另一个节点来调整节点大小和重新连接边。源在整个过程中保持同步。

这让 Mermaid 图表感觉远不像"写了就希望成功"的体验。你可以在文本中大致确定结构，然后在视觉上微调布局。

与 AI Agents 配合使用

1DevTool 中最强大的组合之一是让 AI agent 生成 Mermaid 图表，然后可视化地重新排列结果。例如，打开一个 Claude Code 终端并请求：

"Generate a Mermaid diagram showing how the main components in this codebase interact with each other."

Agent 会读取你的代码库并编写包含 Mermaid 图表的 .md 文件。在 IDE Strip 中打开该文件，图表会可视化渲染。如果布局难以阅读，拖动节点到更清晰的排列。源会自动更新，因此你可以提交改进后的图表。

这也适用于数据库 schema、API 调用序列和部署架构图。

提示： 向 Claude Code 请求："Draw a Mermaid diagram showing how the components in this repo interact." 然后打开生成的 .md 文件查看并可视化重新排列图表。