DiagramPreview
基础解析D2架构预览工作区

D2 在线预览

用 D2 文本描述服务、容器、边界和依赖关系，在发布文档前先检查结构和标签是否清楚。

示例
D2 预览就绪
D2 renderer 正在建设中。

下一步可以继续

把当前预览结果带到相关工具里继续转换、排查或导出。

AI 图表生成器

用自然语言生成可编辑 Mermaid 图表，并在导出前完成预览和 review。

打开
Mermaid AI 修复器

用 AI 修复 Mermaid 语法错误，并在发布前检查图表语义和可读性。

打开
架构图生成器

用 AI 从产品或系统说明生成 Mermaid 架构图。

打开

使用方法

  1. 1粘贴 D2 文本，先从节点和关系开始，不要急着加样式。
  2. 2使用示例组织 service map、deployment zone 或架构说明。
  3. 3保持 identifier 稳定，避免后续编辑时图形大幅变化。
  4. 4当关系不明显时，用协议、事件或动词作为边标签。
  5. 5专用 SVG renderer 启用后，可回到此页面导出最终图。

常见场景

架构草图服务地图系统图依赖 review部署区域图文本优先架构文档

相关工具

AI 图表生成器

用自然语言生成可编辑 Mermaid 图表，并在导出前完成预览和 review。

Mermaid AI 修复器

用 AI 修复 Mermaid 语法错误，并在发布前检查图表语义和可读性。

架构图生成器

用 AI 从产品或系统说明生成 Mermaid 架构图。

常见问题

D2 渲染已经启用了吗？

路由和工作区已准备好，专用 renderer 会在后续构建阶段完善。

什么样的 D2 图更容易 review？

稳定 node id、短边标签、边界 container 和假设注释，会让 D2 图更容易以文本维护。

什么时候用 D2 而不是 Mermaid？

当你想表达有明确 container、label 和服务关系的文本优先架构图时，D2 更合适。

D2 Preview 已接入 DiagramPreview 工具家族，后续可以复用同一套编辑器、metadata、导出和相关工具导航。

第一版先搭好页面结构和示例系统，专用 renderer 后续可无缝接入。

该页面面向架构草图、服务图和文本优先的系统图。

Demo：起草 D2 服务地图

D2 适合需要标签、容器和类型化关系的架构图。即使还没最终样式，预览也能确认文本是否描述了目标系统。

  • 用嵌套 block 表示领域或部署区域。
  • 边标签写成动词、协议或事件。
  • 保持 identifier 稳定，避免未来编辑导致图大幅重排。
client -> gateway: HTTPS
gateway -> orders: REST
orders -> queue: publish event
queue -> worker: consume
orders -> db: SQL

Review 提示：先结构后视觉

最好的 D2 工作流从结构开始。节点和边正确后再应用主题和布局，否则样式会掩盖缺失依赖。

  • 先在纯结构下验证图。
  • flow 正确后再加 icon 或自定义样式。
  • 用注释解释图中看不出的假设。
# Assumption: analytics is async
api -> event_bus: order.created
event_bus -> analytics: consume

架构提示：先建模边界，再添加依赖

D2 很适合表达 bounded context、部署区域和 ownership 边界。先建 container，再在边界内外添加依赖。

  • 用 nested block 表示团队、网络或运行区。
  • 明确命名外部依赖，避免被误认为内部服务。
  • 通过标签区分同步和异步关系。
prod: {
  web
  api
  worker
}
external: {
  stripe
}
web -> api: HTTPS
api -> stripe: payment auth
api -> worker: order.created

D2 在线预览 检查清单

当你需要在文档、PR、故障复盘或交接材料发布前检查源码内容时，可以使用 D2 在线预览。在线预览 D2 架构图和服务关系图，适合文本优先的架构文档。

导出前建议检查标签是否可读、关系是否和源码一致、示例是否包含敏感信息，以及修改输入后预览是否仍然成立。

限制与排查

如果预览失败，先把输入缩小到最小完整示例，确认格式语法，再逐段加回内容。很多失败来自不完整文件、缩进错误、缺少图表头，或复制了依赖隐藏上下文的片段。

请把预览结果当作 review 界面，而不是生产事实来源。生成的图表、转换文件、看板和规则示例在进入正式文档或运维流程前仍需要人工确认。

可测试的示例输入

  • 架构: client -> gateway -> api api -> database api -> queue
  • 服务图: web: Web app api: API service db: Database web -> api -> db
  • 时序: user -> app: request app -> api: fetch api -> app: response

工具完成度

基础解析

基础解析

这个工具偏向快速结构检查，适合预览、排查和定位问题；关键输出进入生产前仍需要人工复核。

分级不是质量打分，而是告诉用户当前工具更适合稳定导出、深度调试、快速解析，还是 AI 辅助生成。