drawio-architecture | partme-ai-full-stack-skills | ClaudePluginHub

Skill

drawio-architecture

From partme-ai-full-stack-skills

Creates system architecture, deployment, and component diagrams using Draw.io (diagrams.net). Supports C4 model, UML, AWS/Azure/GCP cloud shapes, swim lanes; exports PNG/SVG/PDF. For designing diagrams and documentation.

Install

$

npx claudepluginhub partme-ai/full-stack-skills --plugin t2ui-skills

Tool Access

This skill uses the workspace's default tool permissions.

Preview

Use this skill whenever the user wants to:

Supporting Assets

SKILL.md

Similar Skills

using-git-worktrees

Creates isolated Git worktrees for feature branches with prioritized directory selection, gitignore safety checks, auto project setup for Node/Python/Rust/Go, and baseline verification.

168.3k

subagent-driven-development

3 files

Executes implementation plans in current session by dispatching fresh subagents per independent task, with two-stage reviews: spec compliance then code quality.

168.3k

dispatching-parallel-agents

Dispatches parallel agents to independently tackle 2+ tasks like separate test failures or subsystems without shared state or dependencies.

168.3k

Stats

Stars328

Forks62

Last CommitMar 25, 2026

Actions

View Source View Plugin View on GitHub View README

Tags

architecture-diagrams

deployment-diagrams

When to use this skill

Use this skill whenever the user wants to:

Create system architecture diagrams (microservices, monolith, cloud)
Design deployment or infrastructure diagrams (AWS, Azure, GCP)
Build C4 model diagrams (context, container, component, code)
Generate UML component or package diagrams
Export diagrams for documentation or design reviews

How to use this skill

Workflow

Choose a template - Start from C4, UML, or cloud provider template in Draw.io
Add shapes - Use the appropriate shape library (AWS, Azure, GCP, UML, or general)
Define connections - Use labeled arrows to show data flow and dependencies
Add legend and title - Include a legend explaining colors/shapes and a diagram title
Export - Save as .drawio for version control; export PNG/SVG/PDF for docs

Quick-Start Example: C4 Container Diagram (XML)

<mxGraphModel>
  <root>
    <mxCell id=”0”/>
    <mxCell id=”1” parent=”0”/>
    <!-- Web App container -->
    <mxCell id=”2” value=”Web Application&#xa;[React, TypeScript]” style=”rounded=1;whiteSpace=wrap;fillColor=#438DD5;fontColor=#ffffff;” vertex=”1” parent=”1”>
      <mxGeometry x=”100” y=”100” width=”160” height=”80” as=”geometry”/>
    </mxCell>
    <!-- API container -->
    <mxCell id=”3” value=”API Server&#xa;[Go, Gin]” style=”rounded=1;whiteSpace=wrap;fillColor=#438DD5;fontColor=#ffffff;” vertex=”1” parent=”1”>
      <mxGeometry x=”400” y=”100” width=”160” height=”80” as=”geometry”/>
    </mxCell>
    <!-- Arrow: Web App → API -->
    <mxCell id=”4” value=”REST/JSON” style=”edgeStyle=orthogonalEdgeStyle;” edge=”1” source=”2” target=”3” parent=”1”/>
  </root>
</mxGraphModel>

Collaboration

Version control - Store .drawio files in Git alongside source code
Confluence - Use the Draw.io Confluence plugin for inline editing
Google Drive - Open diagrams.net with Google Drive integration

Best Practices

One diagram, one topic - Avoid cramming multiple concerns into a single diagram
Consistent styling - Use the same colors, fonts, and arrow styles across all diagrams
Add a legend - Explain what colors and shapes represent
Layer complex systems - Use multiple diagrams at different abstraction levels (C4 levels 1-3)
Note the update date - Add a “Last updated: YYYY-MM-DD” label for living documents

Keywords

draw.io, diagrams.net, architecture diagram, C4, deployment diagram, UML, component diagram, 架构图, 部署图, system design, cloud architecture