$npx skillfedfor your agent

drawio-diagram

drawio-diagram creates standard Draw.io (.drawio) format diagrams for deep learning models, network architectures, and algorithm flows. It supports two modes: generating diagrams from scratch for model architectures and process flows, or applying a reference diagram's style to new content. All output is valid XML that opens directly in Draw.io for editing.

drawio-diagram generates standard Draw.io format diagrams for deep learning models, neural networks, and algorithm flows.

AI-generated summary based on this skill's SKILL.md

2,407 169 Apache-2.0updated by xstongxue

Decision gist · record as of 2026-07-19

drawio-diagram generates standard Draw.io format diagrams for deep learning models, neural networks, and algorithm flows. drawio-diagram creates standard Draw.io (.drawio) format diagrams for deep learning models, network architectures, and algorithm flows. It supports two modes: generating diagrams from scratch for model architectures and process flows, or applying a reference diagram's style to new content. All output is valid XML that opens directly in Draw.io for editing.

manual: git clone https://github.com/xstongxue/best-skills → cp -r best-skills/skills/drawio-diagram ~/.claude/skills/drawio-diagram
skills/drawio-diagram/SKILL.md · version b825a063

Use it when

  • drawio-diagram supports deep learning model architectures (CNNs, RNNs, Transformers), algorithm flowcharts.
  • drawio-diagram includes a style transfer mode where you provide a reference diagram and new content.

Verify before relying

Read SKILL.md below before installing (12 files). Open directory: indexed for reading, not audited.

Same gist for agents: .md · .json

Install

xstongxue/best-skills/drawio-diagram · repository language: JavaScript

Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.

Frequently asked questions

AI-generated answers based on this skill's SKILL.md and metadata

Can drawio-diagram generate draw.io diagrams for neural networks?

Yes. drawio-diagram creates standard Draw.io (.drawio) format diagrams for deep learning models and neural network architectures. You can generate diagrams from scratch for various model types, and all output is valid XML that opens directly in Draw.io for editing and further customization.

What diagram types does drawio-diagram support?

drawio-diagram supports deep learning model architectures (CNNs, RNNs, Transformers), algorithm flowcharts, system architecture visualizations, data flow diagrams, and ML concept visualizations like attention mechanisms and receptive fields. It produces properly formatted .drawio XML files ready for direct editing.

How does drawio-diagram apply reference image style to new content?

drawio-diagram includes a style transfer mode where you provide a reference diagram and new content. The skill applies the reference diagram's visual styling—colors, fonts, layout patterns—to your new diagram content, maintaining consistent design while updating the structure.

What output format does drawio-diagram produce?

drawio-diagram produces valid .drawio XML files that open directly in Draw.io without conversion. The XML format is standard and editable, allowing you to import the generated diagrams into Draw.io and modify them further as needed.

Can drawio-diagram create flowcharts and system diagrams?

Yes. drawio-diagram creates algorithm flowcharts and system architecture visualizations alongside deep learning model diagrams. It handles process flows, data pipelines, and network topologies in the same Draw.io format, making it versatile for technical documentation.

Does drawio-diagram support transformer and CNN architecture visualization?

Yes. drawio-diagram can visualize transformer models, CNN architectures, RNNs, and other deep learning frameworks. It also supports specialized ML visualizations like attention mechanisms, receptive fields, and feature extraction flows—all in standard Draw.io format.

SKILL.md

Rendered from the published skill. Quoted content, verbatim.

Draw.io 图表

本 Skill 指导 Agent 生成标准的 Draw.io 格式图表(.drawio 文件),支持两种模式:从零生成(模型架构、算法流程等)与风格迁移(参考图 + 内容 → 按参考图风格生成新图)。

Step 0:任务识别

条件 执行
用户提供参考图,且希望「按这张图的风格」画新图 执行 reference/style-migration.md
其他情况(从零生成) 执行 reference/generation.md

使用时机

从零生成: - 用户需要为深度学习模型(如 Transformer、CNN、RNN 等)生成架构图 - 用户需要绘制算法流程图、数据流图、系统架构图 - 用户需要可视化特定概念(如感受野、注意力机制、特征提取过程等) - 用户提到「画个图」「生成架构图」「可视化模型结构」「绘制流程图」等需求

风格迁移: - 用户提供参考图,希望「按这个风格画」「照着这个排版/配色画」

通用规范(两种模式共用)

1. XML 格式严格性
  • ✅ 所有标签必须正确闭合:<mxCell> 对应 </mxCell>,绝不能写成 </mCell>
  • ✅ 使用 vertex="1" 标记节点,edge="1" 标记连线
  • ✅ 每个元素必须有唯一 id,从 0 开始递增
  • ✅ 特殊字符必须转义:&&<<>>
2. 标准文件结构

```xml <mxfile host="app.diagrams.net"> <diagram name="图表名称" id="图表id"> <mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="宽度" pageHeight="高度" background="#F5F5DC"> <root>

(truncated - see the full file via the links below)

File tree — 12 files
skills/drawio-diagram/SKILL.md
skills/drawio-diagram/reference/edu-biology.md
skills/drawio-diagram/reference/edu-chemistry.md
skills/drawio-diagram/reference/edu-chinese.md
skills/drawio-diagram/reference/edu-geography.md
skills/drawio-diagram/reference/edu-history.md
skills/drawio-diagram/reference/edu-math.md
skills/drawio-diagram/reference/edu-physics.md
skills/drawio-diagram/reference/generation.md
skills/drawio-diagram/reference/style-migration.md
skills/drawio-diagram/reference/tech-diagram.md
skills/drawio-diagram/reference/uml-diagram.md

Let your AI agent find skills like this

Example. Real query, live index.

You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.

wish › “Generate Draw.io diagrams for deep learning models and neural network architectures”

Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →

Related skills

pptgen-drawio
by xstongxue · xstongxue/best-skills

pptgen-drawio transforms academic papers or presentation content into structured multi-page Draw.io presentations, then exports them as .pptx files. It offers two dedicated modes—one optimized for thesis defenses with a 23-page academic structure, and another for general business or project presentations—each with customizable styling, template support, and automatic formatting.

Apache-2.0docs in Chineseupdated Jul 2026
★ 2,407repo stars
wechat-article-writer
by xstongxue · xstongxue/best-skills

WeChat Article Writer handles end-to-end social media content creation by matching user requests to specialized workflows: article drafting, cover generation, illustration design, and style extraction. Choose from nine writing styles—viral, checklist-based, resource roundups, personal reviews, contrarian takes, identity narratives, emotional storytelling, or deep essays—and the skill automatically applies the corresponding tone and structure. Generate publication-ready layouts with optional diagram exports, then upload directly to WeChat drafts or publish via API.

Apache-2.0docs in Chineseupdated Jul 2026
★ 2,407repo stars
excalidraw-diagram
by xstongxue · xstongxue/best-skills

This skill transforms text descriptions and structured information into ready-to-edit Excalidraw diagrams. It handles system architectures, process flows, data structures, and freeform sketches, outputting standard Excalidraw JSON files that open directly in browsers, Obsidian, VSCode, and other compatible environments.

Apache-2.0docs in Chineseupdated Jul 2026
★ 2,407repo stars
codegen-diagram
by xstongxue · xstongxue/best-skills

This skill guides your agent to create Draw.io-compatible diagrams directly from your project code, supporting tech stack, system architecture, data structure, and entity-relationship diagram types. Output is delivered as mxGraph XML (.drawio files) ready for immediate import and editing.

Apache-2.0docs in Chineseupdated Jul 2026
★ 2,407repo stars
draw-io
by malue-ai · malue-ai/dazee-small

Create polished diagrams—flowcharts, organizational hierarchies, UML schematics, and network layouts—as draw.io-compatible XML files. The skill handles diagram structure, styling, and layout, then outputs files you can open directly in draw.io's desktop or web application.

MITdocs in Chineseupdated Mar 2026
★ 35repo stars
aws-drawio-architecture-diagrams
by giuseppe-trisciuoglio · giuseppe-trisciuoglio/developer-kit

This skill generates pixel-perfect AWS architecture diagrams as draw.io XML files (.drawio) using the official AWS4 shape library, ready for use in diagrams.net. It handles VPC layouts, multi-tier application designs, serverless architectures, and network topologies with proper styling, color codes, and connector conventions. Perfect for infrastructure documentation and Well-Architected reviews.

MITupdated Jun 2026
★ 311repo stars

More skills drawio-logical-diagrams (MIT) · Drawio Diagrams Enhanced (GFDL-1.3) · Agents Bruce Drawio (unlicensed) · patent-write (Apache-2.0) · Interactive Dashboard Builder (unlicensed)

Tags
neural-network-vizml-architecture-designflowchart-generationstyle-transfer-diagramsdeep-learning-visualsxml-diagram-formatalgorithm-flowchartssystem-topology-mapstechnical-drawing-toolmodel-structure-charts