EditorialDiagramClaude Code diagram design skill · 浏览器工作台
即刻上手 diagram-design 网页工作台，无需配置 CLI
在浏览器中探索 41 种编辑式布局语法。从下方的实时示例开始，在 4px 网格上拖动节点，预览公司品牌配色，全程无需消耗 AI Token。
免费体验示例
示例预览拖动节点微调，方向键移动 4px，空格加拖动平移。
正在检查几何布局…
导出图表
免费 PNG 包含 EditorialDiagram 角标。
细线、讲究的排版、不加阴影。
从 Skill 到交互画布
CLI Skill 与 EditorialDiagram Web Studio 对比
将开源 diagram-design 的工作流程搬进交互式网页工作台。沿用编辑式布局方法，加入可直接微调的画布、实时品牌配色预览和设计工具导出。
| 工作流程 | Claude Code CLI Skill | EditorialDiagram Web Studio |
|---|---|---|
| 开始使用 | 安装 diagram-design skill，并在本地配置 Claude Code。 | 打开页面即可试玩缓存示例。体验示例无需配置 CLI，也无需登录。 |
| 编辑式布局 | 通过 Skill 指令和提示词选择布局。 | 浏览 41 种编辑式布局语法，体验预设示例，并切换工程师、混合和高管视图。 |
| 图表输入 | 通过提示词和本地工具处理源文件。 | 粘贴 Mermaid 或文本，也可将 .drawio 和 Excalidraw 文件拖入工作台（文件导入需付费套餐）。 |
| 4px 网格微调 | 请求修改，再检查生成结果。 | 用鼠标拖动节点，或用方向键每次移动 4px。在实时预览中检查网格和元素重叠。 |
| 公司品牌配色 | 在生成流程中加入调色板指令。 | 从公司公开网址提取颜色，实时预览调色板。品牌配色预览和颜色切换均不消耗 AI Token。 |
| SVG 复制到 Figma | 将生成的 SVG 导入设计工具。 | 一键 Copy SVG to Figma，粘贴即可编辑矢量图层（需付费套餐）。 |