@bovinphang/frontend-craft 2.7.0 → 2.9.0

package/skills/fec-drawio-studio/SKILL.md

@@ -1,69 +1,73 @@
 ---
 name: fec-drawio-studio
-description: Use when creating editable technical diagrams with draw.io / diagrams.net sources, including architecture diagrams, ERD, UML, sequence diagrams, flowcharts, ML model diagrams, official shape lookup, brand symbols, Graphviz auto-layout, codebase structure maps, .drawio validation, or draw.io CLI export fallback. Do not use for ordinary raster image generation, freehand sketches, interactive canvas/Three.js scenes, or decorative SVG animation. Chinese triggers include draw.io, diagrams.net, 可编辑架构图, .drawio, ER 图, UML, 序列图, 自动布局, 形状检索, 代码结构图.
+description: Use when creating editable technical diagrams with draw.io / diagrams.net sources, including architecture diagrams, ERD, UML, sequence diagrams, flowcharts, ML model diagrams, official shape lookup, brand symbols, Graphviz auto-layout, codebase structure maps, .drawio validation, or draw.io CLI export fallback. Do not use for ordinary raster image generation, freehand sketches, interactive canvas/Three.js scenes, or decorative SVG animation. Chinese triggers include draw.io, diagrams.net, editable architecture diagrams, .drawio, ER diagrams, UML, sequence diagrams, auto layout, shape retrieval, code structure diagrams.
 ---
 
-# 可编辑技术图表工作流
+# Editable technical chart workflow
 
 ## Purpose
 
-生成、校验和导出可继续编辑的 draw.io / diagrams.net 技术图表。
+Generate, verify and export draw.io / diagrams.net technical diagrams that can be edited further.
 
 ## Procedure
 
-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。
-   - 需要照片、海报、视觉概念或位图编辑时，走图片生成路线。
+1. Determine the chart route
+   - Simple diagrams in Markdown that need long-term maintenance, Mermaid is preferred.
+   - Use this workflow when you need official icons, swimlanes, complex layouts, layers/tags/metadata, editable PNG/SVG/PDF or `.drawio` sources.
+   - When you need fast browser opening or sharing, use [diagram-url.mjs](scripts/diagram-url.mjs) to generate the URL; when you need local auditable delivery, always save the `.drawio` source.
+   - If the user already has Mermaid or CSV content, they can use `diagram-url.mjs --create --type mermaid|csv` to import it to diagrams.net; when long-term maintenance or precise shape is required, convert it to XML.
+   - If the draw.io MCP App/Tool has been configured on the current host, it can be used as a preview or editing entrance; this skill does not require the installation of MCP server.
+   - Go the image generation route when you need photos, posters, visual concepts or bitmap editing.
 
-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)。
+2. Create chart specifications
+   - Clarify diagram type, audience, output format, node list, relationships, hierarchical grouping and save location.
+   - Read [diagram-patterns.md](references/diagram-patterns.md) when the user specifies Flowchart, Architecture, Sequence, UML Class, ERD, Mindmap, Network Topology or ML/DL diagrams.
+   - For process, workflow, approval, release or incident-response flowcharts that must open cleanly in diagrams.net, also read [flowchart-quality.md](references/flowchart-quality.md).
+   - To select XML, Mermaid, CSV, container, layer, tag, metadata or dark mode policy, read [xml-and-mermaid.md](references/xml-and-mermaid.md).
+   - When you need a specific vendor/cloud/network/flowchart shape, run [shape-query.mjs](scripts/shape-query.mjs); when you need AI, database or infrastructure brand symbols, run [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。
+3. Generate `.drawio` source
+   - Draw.io XML can be manually generated for small drawings when exact node coordinates, sizes and connections are easier to reason about directly.
+   - When there are more than about 15 nodes, dependency graphs or code structure graphs, first generate graph JSON and then use [layout-graph.mjs](scripts/layout-graph.mjs) for automatic layout.
+   - For manually placed XML, align coordinates to a 10px grid, keep generous gaps between sibling nodes, use `whiteSpace=wrap;html=1`, prefer `fontSize=14`, encode forced line breaks as `
`, and size containers to their content instead of leaving one-sided blank areas.
+   - For manually authored flowcharts, keep `pageWidth` in the readable 600-800 range unless a wide cross-functional table is intentional; use swimlane containers for real stages and route loop or rollback edges around the margin with explicit waypoints.
+   - Code structure diagram can be used first [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) or [scan-python-classes.mjs](scripts/scan-python-classes.mjs) to generate graph JSON.
 
-4. 校验和预览
-   - 每次生成 `.drawio` 后运行：
+4. Checksum preview
+   - Run after each generation of `.drawio`:
      ```bash
      node skills/fec-drawio-studio/scripts/diagram-lint.mjs diagram.drawio --format markdown
      ```
-   - 若本机有 draw.io desktop CLI，导出预览 PNG 时不要嵌入 XML，并控制宽度：
+   - If the machine has draw.io desktop CLI, do not embed XML when exporting the preview PNG, and control the width:
      ```bash
-     drawio -x -f png --width 2000 -o diagram.png diagram.drawio
+     node skills/fec-drawio-studio/scripts/drawio-export.mjs diagram.drawio --format png --output diagram.png --width 2000
      ```
-   - 若 CLI 不可用，用 [diagram-url.mjs](scripts/diagram-url.mjs) 生成 diagrams.net viewer/editor URL；严格离线或数据驻留敏感时先读取 [data-residency.md](references/data-residency.md)。
+   - If CLI is not available, use [diagram-url.mjs](scripts/diagram-url.mjs) to generate diagrams.net viewer/editor URL; first read [data-residency.md](references/data-residency.md) when strictly offline or data residency is sensitive.
 
-5. 交付最终产物
-   - 保存 `.drawio` 源文件和用户需要的 PNG/SVG/PDF/JPG。
-   - 最终 PNG 若使用 draw.io `-e` 嵌入 XML，导出后运行：
+5. Deliver the final product
+   - Save `.drawio` source files and PNG/SVG/PDF/JPG required by users.
+   - If the final PNG is embedded in XML using draw.io `-e`, run after exporting:
      ```bash
+     node skills/fec-drawio-studio/scripts/drawio-export.mjs diagram.drawio --format png --output diagram.drawio.png --scale 2 --embed
      node skills/fec-drawio-studio/scripts/png-embed-fix.mjs diagram.drawio.png
      ```
-   - 报告源文件、导出文件、校验结果和无法自动验证的外部依赖。
+   - Report source files, exported files, verification results, and external dependencies that cannot be automatically verified.
 
 ## Tool Resources
 
-工具脚本共享 [studio-core.mjs](scripts/studio-core.mjs)。离线查询使用 [shape-index.json.gz](data/shape-index.json.gz) 与 [brand-icons.json](data/brand-icons.json)，样式预设资源包括 [schema.json](styles/schema.json)、[default.json](styles/built-in/default.json)、[corporate.json](styles/built-in/corporate.json) 和 [handdrawn.json](styles/built-in/handdrawn.json)。
+Tool script sharing [studio-core.mjs](scripts/studio-core.mjs). Offline query uses [shape-index.json](data/shape-index.json) and [brand-icons.json](data/brand-icons.json). Style preset resources include [schema.json](styles/schema.json), [default.json](styles/built-in/default.json), [corporate.json](styles/built-in/corporate.json) and [handdrawn.json](styles/built-in/handdrawn.json).
 
 ## Constraints
 
-- 不把 draw.io 用作普通图片模型；文本密集或结构化图必须保留可编辑源。
-- 不猜测复杂 `shape=mxgraph.*` 样式；优先用形状查询工具获取官方样式。
-- 不为 draw.io 工作流引入 MCP server 运行时依赖；MCP App/Tool 只作为用户环境已有时的可选互操作入口。
-- Mermaid/CSV URL 是导入捷径，不替代 `.drawio` 源文件、lint 和可编辑交付。
-- 不在预览 PNG 中嵌入 XML；嵌入只用于最终交付。
-- Graphviz、draw.io desktop 和联网品牌图标都是可选外部能力；缺失时必须降级而不是反复重试。
-- 品牌图标和第三方形状索引遵循 [THIRD_PARTY_NOTICES.md](data/THIRD_PARTY_NOTICES.md) 中的来源与许可说明。
-- 参考外部 draw.io MCP 生态时，只吸收路线、约束和互操作经验，不复制其服务实现或长篇提示词。
+- Do not use draw.io as a normal image model; text-heavy or structured images must remain editable source.
+- Don't guess complex `shape=mxgraph.*` styles; use the shape query tool to get the official styles first.
+- The MCP server runtime dependency is not introduced for the draw.io workflow; MCP App/Tool is only used as an optional interoperability entry when the user environment already exists.
+- Mermaid/CSV URLs are import shortcuts and do not replace `.drawio` source files, lint and editable delivery.
+- Do not embed XML in preview PNGs; embedding is for final delivery only.
+- Graphviz, draw.io desktop, and networked branding icons are all optional external capabilities; they must be downgraded instead of retried when missing. `drawio-export.mjs` may detect local draw.io paths and print installation guidance, but it must not install draw.io automatically.
+- Brand icons and third-party shape indexes follow the source and licensing instructions in [THIRD_PARTY_NOTICES.md](data/THIRD_PARTY_NOTICES.md).
+- When referring to the external draw.io MCP ecosystem, only absorb routes, constraints and interoperability experience, and do not copy its service implementation or long prompts.
 
 ## Expected Output
 
-交付可编辑 `.drawio` 源和所需导出格式，并给出结构校验结果。图表应节点完整、连线可追踪、标签不截断、布局不重叠，外部工具缺失时提供可打开的 diagrams.net fallback。
+Deliver editable `.drawio` source and required export format, with structural verification results. The diagram should have complete nodes, traceable connections, non-truncated labels, non-overlapping layouts, and a diagrams.net fallback that can be opened when external tools are missing.

package/skills/fec-drawio-studio/data/THIRD_PARTY_NOTICES.md

@@ -2,7 +2,7 @@
 
 This skill includes compact indexes and manifests used to produce editable diagrams.
 
-- `shape-index.json.gz` contains draw.io shape metadata used for local style lookup. Shape names, dimensions and style strings come from the draw.io / diagrams.net shape ecosystem and remain subject to their upstream terms.
+- `shape-index.json` contains draw.io shape metadata used for local style lookup. Shape names, dimensions and style strings come from the draw.io / diagrams.net shape ecosystem and remain subject to their upstream terms.
 - `brand-icons.json` is a manifest for lobe-icons CDN assets. lobe-icons is MIT licensed; individual logos and names may be trademarks of their respective owners.
 - `brand-symbols.mjs` may reference simple-icons CDN slugs for selected infrastructure and database symbols. simple-icons metadata and icons are available under their upstream license; brand trademarks remain owned by their respective holders.
 - The workflow documents mention optional interoperability with external draw.io MCP App/Tool deployments. Those services are not bundled, vendored or required by this package.