EditorialDiagram
图表目录

✨ 基于开源 diagram-design 规范 — 即开即用的 Diagram Design 网页工作台，无需配置 CLI

编辑式 Diagram Design 工作台与 AI 美化工具

在浏览器中使用 Diagram Design 工作台美化 Mermaid、导入 .drawio 文件，或用文字描述系统。生成层级清晰、连线路径精确、字体适合演示的出版级 Editorial SVG 图表。

免费体验示例
100%
示例预览
A clear path from request to insight.A faithful ten-node microservice system. The gateway routes requests to authentication, orders and catalog services. Dedicated storage and an event-driven analytics path are retained.SERVICE TIERDATA TIERA clear path from request to insight.EDITORIALDIAGRAM / EDITORIAL SAMPLEHTTPSAUTHENTICATESROUTESQUERIESREADSWRITESCACHESPUBLISHESWeb AppCUSTOMER EXPERIENCEAPI GatewayREQUEST ROUTINGAuth ServiceIDENTITY & ACCESSOrders ServiceORDER LIFECYCLECatalog ServicePRODUCT DISCOVERYUser DBPOSTGRESOrders DBPOSTGRESCacheREDISEvent BusASYNC EVENTSAnalytics WorkerBUSINESS SIGNALS
正在检查几何布局…

导出图表

免费 PNG 包含 EditorialDiagram 角标。

细线、讲究的排版、不加阴影。

为什么选择在线 Diagram Design 工作台，而非原生 Mermaid？

Mermaid 记录组件关系，编辑式 Diagram Design 还会组织读者理解图表的顺序。Mermaid 美化工具针对连线、层级、颜色和字体四项视觉差距重新排版。下面用相同的十个组件，对比拥挤的源图风格与编辑式 SVG 布局。

Mermaid 杂乱排版 · 反例示意
The same ten-node system in a crowded source-style layoutIllustrative Mermaid and Draw.io anti-patterns: diagonal crossings, equally weighted boxes, unrelated fills and drop shadows. These are avoidable choices, not editor limitations.Web AppAPI GatewayAuth ServiceOrders ServiceCatalog ServiceUser DBOrders DBCacheEvent BusAnalytics Worker
连线路径
斜线捷径和未标记的交叉，让无关路径看起来像发生了连接。
信息层级
所有方框等大，让网关、业务服务和数据库具有相同视觉权重。
颜色与层次
无关的浅色填充和投影，抢走了系统关系本身的注意力。
字体与导出
缺乏层级的默认标签，难以区分组件名称、职责和关系注释。
编辑式 Diagram Design · 相同的十个组件
A clear path from request to insight.A faithful ten-node microservice system. The gateway routes requests to authentication, orders and catalog services. Dedicated storage and an event-driven analytics path are retained.SERVICE TIERDATA TIERA clear path from request to insight.EDITORIALDIAGRAM / EDITORIAL SAMPLEHTTPSAUTHENTICATESROUTESQUERIESREADSWRITESCACHESPUBLISHESWeb AppCUSTOMER EXPERIENCEAPI GatewayREQUEST ROUTINGAuth ServiceIDENTITY & ACCESSOrders ServiceORDER LIFECYCLECatalog ServicePRODUCT DISCOVERYUser DBPOSTGRESOrders DBPOSTGRESCacheREDISEvent BusASYNC EVENTSAnalytics WorkerBUSINESS SIGNALS
连线路径
正交线路与 r=8 圆角转弯，区分请求、存储访问和事件传递。
信息层级
服务层、数据层、较矮的存储节点及职责标签建立明确的阅读顺序。
颜色与层次
五种语义颜色、细边框与克制的珊瑚色焦点，让关注点回到系统。
字体与导出
Instrument Serif、Geist 与 Geist Mono 各司其职；SVG 保留可编辑的文字与几何结构，矢量导出需要付费套餐。

左侧刻意展示可以避免的排版问题，并非某个编辑器的默认输出。Mermaid 与 Draw.io 都能做好样式；这里比较的是编辑设计决策，而不是编辑器能力的上限。

面向受众的 Diagram Design：工程师（1:1）与高管模式

面向受众的 Diagram Design 让同一套系统服务不同读者。工程师模式按 1:1 保留组件，混合模式合并相关实现细节，高管模式则概括核心能力。下面展示同一系统从 24 个节点精简为 12 个，再降维为适合高管汇报的 7 个节点。

工程师（1:1 · 24 个节点）

engineer: one commerce system, 24 nodesIllustrative aggregation of the same 24 components into 12 service pairs and then seven capabilities, keeping Cart and Orders distinct within Checkout. Each rectangle records its source members. Connections summarize capability handoffs, not every runtime call.ACCESSCATALOGCHECKOUTPAYMENTSDELIVERYINSIGHTSWeb AppAPI GatewayAuth APIUser DBCatalog APIProduct DBSearch APISearch IndexCart APICart CacheOrders APIOrders DBBilling APIBilling DBPayment AdapterReceipt WorkerShipping APIShipment DBEvent BusDispatch WorkerCollectorEvent StoreAnalytics WorkerReport API

分别保留 API、数据库、缓存、适配器和 Worker 等 24 个组件。需要评审组件归属和实现依赖，再做架构决策时，应使用这一视图。

混合（12 个节点）

mixed: one commerce system, 12 nodesIllustrative aggregation of the same 24 components into 12 service pairs and then seven capabilities, keeping Cart and Orders distinct within Checkout. Each rectangle records its source members. Connections summarize capability handoffs, not every runtime call.ACCESSCATALOGCHECKOUTPAYMENTSDELIVERYINSIGHTSEntryIdentityProductsSearchCartOrdersBillingSettlementShippingDispatchCollectionReporting

将服务与专属存储或密切相关的 Worker 配对，形成 12 项职责。访问、目录、结账、支付、交付和洞察六个能力域保持可见，减少基础设施细节。

高管（7 个节点）

executive: one commerce system, 7 nodesIllustrative aggregation of the same 24 components into 12 service pairs and then seven capabilities, keeping Cart and Orders distinct within Checkout. Each rectangle records its source members. Connections summarize capability handoffs, not every runtime call.ACCESSCATALOGCHECKOUTPAYMENTSDELIVERYINSIGHTSAccessCatalogCartOrdersPaymentsDeliveryInsights

将 12 项职责聚合为访问、目录、购物车、订单、支付、交付和洞察七个业务能力。在结账域内分别保留购物车与订单，让高管汇报仍能讨论这一决策点。涉及具体存储、重试或恢复路径时，仍需查看详细视图。

受众降维示意：24 → 12 → 7 个节点。聚合节点记录各自的原始成员；连线概括能力交接，不代表全部运行时调用。上方可交互的示例是另一套十节点系统。

Diagram Design 的六项编辑原则与几何规则

这些 Diagram Design 设计技巧将编辑规范落实为可重复的间距、路径、重点、颜色和字体规则。工作台检查几何关系，并提供 4px 吸附微调，方便完成最后的修正。

4px 网格规则

节点坐标、宽高和圆角使用四的整数倍。共享网格让各层对齐、标签留白可预测，也让手动微调继续保持一致。

正交连线与 r=8 圆角

架构和流程图中，不共轴的连接采用横竖线段与 8px 圆角，避免箭头穿过标签。桑基图、极坐标图等定量图形保留数据表达必需的曲线。

单一强调色视觉焦点

用主要决策、集成点或瓶颈确定视觉重点，将珊瑚色留给这个故事，其余组件保持克制。移除颜色后，标签和形状仍应保留含义。

--paper--ink--muted--soft--accent

五种语义颜色变量

--paper 表示画布，--ink 表示正文，--muted 表示注释，--soft 表示轻边界，--accent 表示重点。更换品牌配色时，各自的语义职责保持稳定。

Instrument Serif + Geist 字体系统

编辑式标题使用 Instrument Serif，组件名称使用 Geist，技术注释使用 Geist Mono。通过文字职责区分故事与实现细节，无需增加装饰。

WCAG AA 品牌配色提取

输入公开品牌网址，提取五种语义颜色。提取器检查主文字 ink 与画布 paper 的对比度是否至少为 4.5:1，不足时修正这对颜色；整张图的可访问性仍需单独检查。

41 种 Diagram Design 类型与布局语法

根据问题选择语法：软件关系、产品决策或定量数据。每一项都有独立可访问的指南，其中十种提供专用交互示例；其余指南解释布局规则及工作台输入准备。

软件工程

产品与规划

数据可视化

Diagram Design 与 SVG 美化工具常见问题

什么是编辑式 Diagram Design？

编辑式 Diagram Design 为图表应用一致的视觉规范：4px 网格、r=8 圆角正交连线、单一强调色焦点、五种语义颜色和清晰的字体职责。Mermaid 主题改变现有渲染的外观，工作台则根据源拓扑与目标受众，重新生成编辑式 SVG 布局。演示前请对照原始输入审核生成结果。

可以在浏览器中在线使用 Claude Code 的 diagram-design 技能吗？

可以在这个在线 Diagram Design 工作台中使用开源 diagram-design 技能的编辑规范和 41 种布局语法，无需本地安装 Claude Code 或配置 CLI。粘贴 Mermaid 或描述系统，选择受众后即可生成编辑式 SVG 布局。缓存示例可免费体验；新的 AI 生成需要账户和积分。工作台会明确显示实际调用的模型：当前自定义图表生成使用 DeepSeek，生成按钮旁显示服务器配置的具体模型标识（默认值为 deepseek-flash）。

Mermaid 美化工具能导入 .drawio 文件，并为高管精简图表吗？

可以。Mermaid 美化工具支持 Mermaid 代码与纯文字输入；付费套餐还提供 .drawio、Excalidraw 文件导入及完整高管模式生成。工程师模式保留详细组件与连接，混合模式将相关组件合并为不超过 12 个节点，高管模式进一步精简为不超过七个核心能力，并附上简化说明。本页展示 24 → 12 → 7 个节点；审核概括视图隐藏的细节时，请使用工程师模式。

哪些功能可以免费体验？能导出可编辑 SVG 吗？

无需登录或消耗 AI 积分，即可查看缓存示例、切换示例受众视图及本地配色。生成新的 AI 图表需要账户和积分。工作台会显示实际调用的 DeepSeek 模型（默认模型标识为 deepseek-flash）。免费套餐支持 Mermaid 或文字输入与标准 PNG 导出；付费套餐提供文件导入、完整高管模式生成、可编辑 SVG、Figma 剪贴板、HTML 和高分辨率 PNG。导出前请查看工作台显示的套餐权益。