MCPInstall

drawio-architecture

Provides comprehensive guidance for draw.io architecture diagrams including diagram creation, shapes, templates, and collaboration. Use when the user asks about draw.io architecture, needs to create architecture diagrams, design system diagrams, or collaborate on diagrams.

Installs
76
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/full-stack-skills/drawio-skills --skill drawio-architecture
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads drawio-architecture automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

When to use this skill

Use this skill whenever the user wants to:

  • 用 Draw.io 画系统架构图、部署图、组件图
  • 产出可导出的矢量/PNG 图用于文档或评审
  • 协作编辑与版本管理(如 Confluence、Git 存 .drawio)

How to use this skill

  1. 工具:Draw.io 桌面版或 diagrams.net;支持 .drawio XML、导出 PNG/SVG/PDF。
  2. 内容:从模板或形状库选(C4、UML、云组件);用泳道/容器表达层次。
  3. 协作:存到 Confluence、Google Drive 或仓库;约定命名与图例。

Best Practices

  • 一图一主题;用标题与图例说明符号含义。
  • 保持风格统一(颜色、字体、箭头);复杂系统用多图分层。
  • 导出时选合适分辨率;文档中引用时注明“架构图”与更新日期。

Keywords

draw.io, architecture diagram, C4, deployment diagram, 架构图, 部署图, diagrams.net

FAQ

What does the drawio-architecture skill do?

Provides comprehensive guidance for draw.io architecture diagrams including diagram creation, shapes, templates, and collaboration. Use when the user asks about draw.io architecture, needs to create architecture diagrams, design system diagrams, or collaborate on diagrams.

How do I install drawio-architecture?

Run npx skills add https://github.com/full-stack-skills/drawio-skills --skill drawio-architecture in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/drawio-architecture/ (personal) or .claude/skills/drawio-architecture/ (project).

Which AI agents can use drawio-architecture?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is drawio-architecture safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains drawio-architecture?

It is published by full-stack-skills in full-stack-skills/drawio-skills. It has 76 recorded installs.

More from full-stack-skills/drawio-skills

View all →

drawio-flowchart

full-stack-skills/drawio-skills

Provides comprehensive guidance for draw.io flowcharts including flowchart creation, shapes, connectors, and diagramming. Use when the user asks about draw.io flowcharts, needs to create flowcharts, design process diagrams, or visualize workflows.

118 installs

Popular code quality & workflow skills

View category →

grill-me

mattpocock/skills

A relentless interview to sharpen a plan or design.

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

handoff

mattpocock/skills

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

domain-modeling

mattpocock/skills

Build and sharpen a project's domain model. Use when discussing codebase terminology, writing or editing a GLOSSARY.md, or recording or editing an ADR.

codebase-design

mattpocock/skills

Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.

diagnosing-bugs

mattpocock/skills

Diagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug this", or reports something broken/throwing/failing/slow.