drawio-diagram-forge

Name: drawio-diagram-forge
Author: aktsmm

github.com/aktsmmDocuments26117 installsUpdated 1d ago

About drawio-diagram-forge

Draw.io Diagram Forge is a skill for generating editable draw.io diagrams from text requirements and image references. It is intended for users preparing architecture, flow, or documentation diagrams that may need later editing in draw.io.

Key features

01Generate native editable .drawio diagrams
02Convert text descriptions into flowcharts
03Rebuild image references as editable elements
04Create architecture and sequence diagrams
05Validate mxCell structure

Use cases

01Create cloud architecture diagrams
02Turn requirements into system diagrams
03Prepare editable diagrams for documentation

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/aktsmm/agent-skills --skill drawio-diagram-forge

After installing, type/drawio-diagram-forgein Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

LICENSE.txt

references/

cloud-icons.md

delivery-patterns.md

mxcell-structure.md

style-guide.md

troubleshooting.md

scripts/

validate_drawio.py

Details

From the project README

Draw.io Diagram Forge

Generate draw.io editable diagrams using AI-powered workflow.

When to Use

Creating architecture diagrams (Azure, AWS)
Converting flowcharts from text descriptions
Transforming images/screenshots into editable format
Generating swimlane, sequence diagrams
Editing Azure/AWS icons in existing .drawio files

Choose this skill when the result will need later GUI editing in draw.io, cloud icons, or documentation-facing diagram assets.

When NOT to Use

Quick inline diagrams that are easier to keep as Mermaid in README or Markdown
One-off text-native diagrams where manual GUI adjustment is not expected
Charts or infographics that require exact axes, data binding, typography, or scripted regeneration
Large multilingual label sets whose font rendering must be identical across platforms
Interactive or animated HTML diagrams, or Mermaid beautification (out of scope)

Prerequisites

Tool	Required
VS Code	Yes
Draw.io Integration	Yes
GitHub Copilot	Yes

Quick Start

Create a login flow diagram

Generate an Azure Hub-Spoke architecture diagram

From inputs/requirements.md, create a system diagram

Output Formats

Extension	Description	When to Use
`*.drawio`	Native format	Recommended
`*.drawio.svg`	SVG + metadata	Markdown/Web
`*.drawio.png`	PNG + metadata	Image with edit

Output: outputs/

If the user asks for an editable diagram, make *.drawio the primary deliverable. Do not let a plain SVG or preview artifact become the file the user is expected to edit.

Recommended Delivery Pattern

ドキュメント向けは name.drawio (editable) + name.drawio.svg (embed) を対で出す。多言語変体・Qiita への掲載・ローカル preview 脱出手順は → references/delivery-patterns.md。

Workflow

Treat generated images as optional layout references, not requirement evidence. Resolve labels, nodes, groups and edge directions in the manifest; flag ambiguity instead of inventing content. Rebuild native mxCells and connectors; wrapping a raster image in draw.io metadata does not make its elements editable.

USER INPUT → ORCHESTRATOR → MANIFEST GATEWAY → SVG FORGE → COMPLETED

Quality Gates

Score	Action
85-100	Proceed
70-84	Fix and retry
50-69	Simplify
0-49	Ask user

When the deliverable is headed for print, gate it on the Monochrome Print Profile and the Pre-delivery Geometry Sweep in style-guide.md before any visual review.

Limits

Limit	Value
Manifest revision	2
SVG revision	2
Total timeout	45min

Cloud Icons

Use Cloud Icons Reference. Azure diagrams must use verified img/lib/azure2/**/*.svg image paths, retain short service labels, and fall back to neutral boxes only when an icon is missing or misleading.

References

File	Description
mxcell-structure.md	mxCell XML structure
cloud-icons.md	Azure/AWS icon guide
style-guide.md	Node colors, edge styles
delivery-patterns.md	Editable + embed pair, Qiita, multilingual
troubleshooting.md	Full troubleshooting (24 items)

Scripts

Script	Description
`scripts/validate_drawio.py`	Validate mxCell structure

Troubleshooting

頻度高トップ 4 件を下記に掲載。全一覧（フレーム/エッジ/余白/PDF 出力、レジェンド位置、エスケープ層、CLI の export オプション等 24 項目）は references/troubleshooting.md。

Issue	Solution
Blank in draw.io	Check `content` attribute
Edges not visible	Verify node IDs
Icons missing	Enable Azure/AWS shapes (+ More Shapes → Azure / AWS)
Text overlaps near outer frame	Inset top callout 16–24px, increase height, wrap to 3–4 lines; review at actual embed width

Done Criteria

Comments

Markdown supported

Details

Author: aktsmm
Repository: aktsmm/agent-skills
Category: Documents
Installs: 117
GitHub stars: 26

Report

More skills

All skills

handoff

github.com/mattpocock

1.1M

Compact the current conversation into a handoff document for another agent to pick up

lark-doc

open.feishu.cn

823.9k

Operate on Feishu cloud documents (Docx / Wiki): read, create, and edit documents; insert or download image attachments; and work with mind notes. Use when the user provides a document URL/token (including /docx/ or /wiki/ on doubao.com); route by URL path/token rather than domain. `/page/<token>` is a Miaoda app, not a Feishu cloud document. Route embedded document resources according to the unified rules in the reading reference. Use lark-drive for standalone comment operations; use docs +fetch to read comments alongside the main text. Operations on spreadsheet or Base internal data are outside this skill.

lark-drive

open.feishu.cn

823.2k

Feishu cloud storage (Drive): manage Drive files and folders, including uploads/downloads, folder creation, copying/moving/deleting, viewing metadata, checking permission settings, comments/permissions/subscriptions, titles, versions, Feishu document security labels (secure labels), and local file imports. Use when users need to organize Drive folders, handle cloud storage resource URLs/tokens, identify link types/actual tokens/titles, or import Word/Markdown/Excel/CSV/PPTX/.base as docx/sheet/bitable/slides. Route doubao.com cloud storage URLs/tokens by resource path and token too; do not fall back to WebFetch. Not responsible for: editing document content (use lark-doc), spreadsheet/Base table data operations (use lark-sheets/lark-base), knowledge space node/member management (use lark-wiki), or native Markdown file read/write/patch/diff (use lark-markdown).

lark-sheets

open.feishu.cn

821.8k

Feishu Spreadsheets: create and operate spreadsheets. Supports worksheets and row/column structures (add/delete/merge/size/hide/freeze/group), cell read/write (values/formulas/styles/comments/cell images), range copy/move/sort/fill, find and replace, bulk updates, and creating and maintaining objects such as charts, pivot tables, conditional formatting, filters and filter views, dropdown lists, sparklines, and floating images. Also supports formula validation, restoring historical versions, and importing/exporting local Excel/CSV files and Feishu spreadsheets. Use when users need to create or edit spreadsheets, summarize and visualize data, format spreadsheets, calculate formulas (including migrating Excel formulas), or build financial models (DCF, three statements, budgets, Sensitivity, etc.). For multidimensional tables (Base/bitable), use lark-base. If users want to search for spreadsheet files in cloud storage (Drive/cloud storage) by name or keyword, use lark-drive's drive +search to locate resources first. When users provide a doubao.com /sheets/ URL/token, use this skill directly; do not fall back to WebFetch because the domain is not Feishu. Routing is based on the URL path pattern and token, not the domain.