← ClaudeAtlas

fec-drawio-studiolisted

用于创建带 draw.io / diagrams.net 源文件的可编辑技术图,包括架构图、ERD、UML、序列图、流程图、ML 模型图、官方形状检索、品牌符号、Graphviz 自动布局、代码结构图、.drawio 校验或 draw.io CLI 导出兜底。不要用于普通位图生成、手绘草图、交互式 Canvas/Three.js 场景或装饰性 SVG 动画;中文触发词包括 draw.io、diagrams.net、可编辑架构图、.drawio、ER 图、UML、序列图、自动布局、形状检索、代码结构图。
bovinphang/frontend-craft · ★ 15 · Code & Development · score 80
Install: claude install-skill bovinphang/frontend-craft
# 可编辑技术图表工作流 ## 用途 生成、校验和导出可继续编辑的 draw.io / diagrams.net 技术图表。 ## 流程 1. 判断图表路线 - 需要长期维护在 Markdown 中的简单图,优先 Mermaid。 - 需要官方图标、泳道、复杂布局、层/标签/元数据、可编辑 PNG/SVG/PDF 或 `.drawio` 源时,使用本工作流。 - 需要快速浏览器打开或分享时,用 [diagram-url.mjs](scripts/diagram-url.mjs) 生成 URL;需要本地可审计交付时,始终保存 `.drawio` 源。 - 用户已经有 Mermaid 或 CSV 内容时,可用 `diagram-url.mjs --create --type mermaid|csv` 交给 diagrams.net 导入;需要长期维护或精确形状时,再转成 XML。 - 如果当前宿主已经配置 draw.io MCP App/Tool,可把它作为预览或编辑入口;本 skill 不要求安装 MCP server。 - 需要照片、海报、视觉概念或位图编辑时,走图片生成路线。 2. 建立图表规格 - 明确图表类型、受众、输出格式、节点清单、关系、层级分组和保存位置。 - 用户指定 ERD、UML、Sequence、Architecture、ML/DL 或 Flowchart 时,读取 [diagram-patterns.md](references/diagram-patterns.md)。 - 需要选择 XML、Mermaid、CSV、容器、层、标签、metadata 或暗色模式策略时,读取 [xml-and-mermaid.md](references/xml-and-mermaid.md)。 - 需要特定厂商/云/网络/流程图形状时,运行 [shape-query.mjs](scripts/shape-query.mjs);需要 AI、数据库或基础设施品牌符号时,运行 [brand-symbols.mjs](scripts/brand-symbols.mjs)。 3. 生成 `.drawio` 源 - 小图可手工生成 draw.io XML,保持节点坐标、尺寸和连线清晰。 - 超过约 15 个节点、依赖图或代码结构图时,先生成 graph JSON,再用 [layout-graph.mjs](scripts/layout-graph.mjs) 自动布局。 - 代码结构图可先用 [scan-js-modules.mjs](scripts/scan-js-modules.mjs)、[scan-ts-modules.mjs](scripts/scan-ts-modules.mjs)、[scan-python-modules.mjs](scripts/scan-python-modules.mjs)、[scan-go-packages.mjs](scripts/scan-go-packages.mjs)、[scan-rust-modules.mjs](scripts/scan-rust-modules.mjs) 或 [scan-python-classes.mjs](scripts/scan-python-classes.mjs) 生成 graph JSON。 4. 校验和预览 - 每次生成 `.drawio` 后运行: ```bash