逻辑图绘制
drawio-logical-diagrams
by giuseppe-trisciuoglio
用 draw.io 原生 XML 直接生成可交付的 .drawio 逻辑图,适合梳理系统流程、抽象架构、BPMN/UML/DFD、决策流和组件交互,不涉及 AWS/Azure 等云厂商细节。
安装
claude skill add --url github.com/giuseppe-trisciuoglio/developer-kit/tree/main/plugins/developer-kit-core/skills/drawio-logical-diagrams文档
Draw.io Logical Diagrams Creation
Overview
Create professional logical diagrams in draw.io's native XML format. This skill enables generation of production-ready .drawio files for logical flow diagrams, system architecture visualizations, and abstract process representations using generic shapes and symbols.
When to Use
Use this skill when:
- Creating logical flow diagrams showing data flow between system components
- Designing logical architecture diagrams (abstract system structure)
- Building BPMN process diagrams for business processes
- Drawing UML diagrams (class, sequence, activity, state)
- Creating data flow diagrams (DFD) for system analysis
- Making decision flowcharts with branching logic
- Visualizing system interactions and sequences
- Documenting logical system design without cloud specifics
Do NOT use for:
- AWS/Azure/GCP architecture diagrams (use
aws-drawio-architecture-diagrams) - Infrastructure-specific diagrams
Instructions
Creating a Logical Diagram
- Analyze the request: Understand the system/process to diagram
- Choose diagram type: Flowchart, architecture, BPMN, UML, DFD, etc.
- Identify elements: Determine actors, processes, data stores, connectors
- Draft XML structure: Create the mxGraphModel with proper root cells
- Add shapes: Create mxCell elements with appropriate styles
- Add connectors: Link elements with edge elements
- Validate XML: Ensure all tags are closed and IDs are unique
- Output: Write the .drawio file for the user
Key XML Components
mxfile: Root element with host and versiondiagram: Contains the diagram definitionmxGraphModel: Canvas settings (grid, page size)root: Container for all cells (must include id="0" and id="1")mxCell: Individual shapes (vertices) or connectors (edges)
Draw.io XML Structure
Every .drawio file follows this XML structure:
<mxfile host="app.diagrams.net" agent="Claude" version="24.7.17">
<diagram id="logical-flow-1" name="Logical Flow">
<mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1"
tooltips="1" connect="1" arrows="1" fold="1" page="1"
pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<!-- Shapes and connectors here -->
</root>
</mxGraphModel>
</diagram>
</mxfile>
Key rules:
- IDs "0" and "1" are reserved for root cells
- Use sequential integer IDs starting from "2"
- Use landscape orientation for architecture diagrams
- All coordinates must be positive and aligned to grid (multiples of 10)
Generic Shapes and Styles
Basic Shape Types
| Shape | Style |
|---|---|
| Rectangle | rounded=0;whiteSpace=wrap;html=1; |
| Rounded Rectangle | rounded=1;whiteSpace=wrap;html=1; |
| Ellipse/Circle | ellipse;whiteSpace=wrap;html=1; |
| Diamond | rhombus;whiteSpace=wrap;html=1; |
| Cylinder | shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1; |
| Hexagon | shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1; |
| Parallelogram | shape=ext;double=1;rounded=0;whiteSpace=wrap;html=1; |
Standard Color Palette
| Element Type | Fill Color | Border Color | Usage |
|---|---|---|---|
| Process | #dae8fc (light blue) | #6c8ebf | Operations/actions |
| Decision | #fff2cc (light yellow) | #d6b656 | Conditional branches |
| Start/End | #d5e8d4 (light green) | #82b366 | Terminal states |
| Data/Store | #e1f5fe (light cyan) | #0277bd | Databases/files |
| Entity | #f3e5f5 (light purple) | #7b1fa2 | External systems |
| Error/Stop | #f8cecc (light red) | #b85450 | Error states |
| Actor/User | #ffe0b2 (light orange) | #f57c00 | Users/actors |
| Container | #f5f5f5 (light gray) | #666666 | Grouping areas |
Connector Styles
Standard flow:
edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;
Dashed (alternative/optional):
edgeStyle=orthogonalEdgeStyle;dashed=1;dashPattern=5 5;strokeColor=#666666;
Arrow head styles:
endArrow=classic;endFill=1- Filled triangleendArrow=open;endFill=0- Open arrowendArrow=blockThin;endFill=1- Block arrow
Diagram Types
1. Logical Flow Diagram
Shows the logical flow of data or processes through system components:
┌─────────┐ ┌─────────┐ ┌─────────┐
│ User │────▶│ Service │────▶│ Data │
└─────────┘ └─────────┘ └─────────┘
Key elements:
- Actors/Users (orange)
- Services/Processes (blue)
- Data Stores (cyan)
- External Systems (purple)
- Data flows (solid arrows)
2. Logical Architecture Diagram
Abstract representation of system components:
┌─────────────────────────────────────────┐
│ Presentation Layer │
│ ┌─────────────┐ ┌─────────────┐ │
│ │ Web UI │ │ Mobile │ │
│ └─────────────┘ └─────────────┘ │
└─────────────────────────────────────────┘
│
┌─────────────────────────────────────────┐
│ Application Layer │
│ ┌─────────────┐ ┌─────────────┐ │
│ │ API │ │ Business │ │
│ │ Gateway │ │ Logic │ │
│ └─────────────┘ └─────────────┘ │
└─────────────────────────────────────────┘
│
┌─────────────────────────────────────────┐
│ Data Layer │
│ ┌─────────────┐ ┌─────────────┐ │
│ │ Database │ │ Cache │ │
│ └─────────────┘ └─────────────┘ │
└─────────────────────────────────────────┘
3. BPMN Process Diagram
Business process modeling:
| Symbol | Meaning |
|---|---|
| Circle | Start/End Event |
| Rounded Rectangle | Activity/Task |
| Diamond | Gateway/Decision |
| Arrow | Sequence Flow |
4. UML Sequence Diagram
Interaction between components:
┌─────────┐ ┌─────────┐ ┌─────────┐
│ Actor │ │Service A│ │Service B│
└────┬────┘ └────┬────┘ └────┬────┘
│ │ │
│─────────────▶│ │
│ │─────────────▶│
│ │◀─────────────│
│◀─────────────│ │
5. Data Flow Diagram (DFD)
System data movement:
- External Entity (square) - Sources/destinations
- Process (circle/rounded) - Transformations
- Data Store (open rectangle) - Storage
- Data Flow (arrow) - Data movement
Shape Examples
Simple Process Box
<mxCell id="2" value="Process Name"
style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;"
vertex="1" parent="1">
<mxGeometry x="200" y="100" width="120" height="60" as="geometry" />
</mxCell>
Decision Diamond
<mxCell id="3" value="Decision?"
style="rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=12;"
vertex="1" parent="1">
<mxGeometry x="280" y="200" width="80" height="80" as="geometry" />
</mxCell>
Start/End Oval
<mxCell id="4" value="Start"
style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=12;"
vertex="1" parent="1">
<mxGeometry x="200" y="300" width="80" height="40" as="geometry" />
</mxCell>
Data Store (Cylinder)
<mxCell id="5" value="Database"
style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;fillColor=#e1f5fe;strokeColor=#0277bd;fontSize=12;"
vertex="1" parent="1">
<mxGeometry x="400" y="100" width="60" height="80" as="geometry" />
</mxCell>
Connector/Arrow
<mxCell id="10"
style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;"
edge="1" parent="1" source="2" target="3">
<mxGeometry relative="1" as="geometry" />
</mxCell>
Label on Connector
<mxCell id="11" value="Data"
style="text;html=1;align=center;verticalAlign=middle;fontSize=11;fontColor=#333333;labelBackgroundColor=#ffffff;"
vertex="1" parent="1">
<mxGeometry x="250" y="160" width="40" height="20" as="geometry" />
</mxCell>
Layout Best Practices
- Flow direction: Left-to-right or top-to-bottom consistently
- Spacing: 40-60px between elements, 20px inside containers
- Grid alignment: All coordinates in multiples of 10
- Label placement: Above horizontal arrows, right of vertical arrows
- Container grouping: Use rounded rectangles for logical groupings
- Balance: Keep diagrams centered, avoid extreme whitespace
Reference Files
For detailed templates and shape references, see:
- shape-styles.md - Complete shape and style reference
- diagram-templates.md - Ready-to-use templates
Examples
Example 1: Simple Order Processing Flow
User Request: "Create a logical flow diagram showing order processing: customer submits order, system validates, if valid then processes payment and ships, if invalid notifies customer."
Generated XML:
<mxfile host="app.diagrams.net" agent="Claude" version="24.7.17">
<diagram id="order-flow-1" name="Order Processing">
<mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<!-- Start -->
<mxCell id="2" value="Start"
style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=12;"
vertex="1" parent="1">
<mxGeometry x="80" y="50" width="80" height="40" as="geometry" />
</mxCell>
<!-- Submit Order -->
<mxCell id="3" value="Submit Order"
style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;"
vertex="1" parent="1">
<mxGeometry x="60" y="130" width="120" height="60" as="geometry" />
</mxCell>
<!-- Validate -->
<mxCell id="4" value="Validate
Order?"
style="rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=12;"
vertex="1" parent="1">
<mxGeometry x="80" y="230" width="80" height="80" as="geometry" />
</mxCell>
<!-- Invalid: Notify -->
<mxCell id="5" value="Notify
Customer"
style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;fontSize=12;"
vertex="1" parent="1">
<mxGeometry x="220" y="240" width="100" height="50" as="geometry" />
</mxCell>
<!-- Valid: Process Payment -->
<mxCell id="6" value="Process
Payment"
style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;"
vertex="1" parent="1">
<mxGeometry x="60" y="350" width="120" height="60" as="geometry" />
</mxCell>
<!-- Ship -->
<mxCell id="7" value="Ship Order"
style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;"
vertex="1" parent="1">
<mxGeometry x="60" y="450" width="120" height="60" as="geometry" />
</mxCell>
<!-- End -->
<mxCell id="8" value="End"
style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=12;"
vertex="1" parent="1">
<mxGeometry x="80" y="550" width="80" height="40" as="geometry" />
</mxCell>
<!-- Connectors -->
<mxCell id="10" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="2" target="3">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="11" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="3" target="4">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="12" value="No" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#b85450;strokeWidth=2;fontSize=11;" edge="1" parent="1" source="4" target="5">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="13" value="Yes" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#82b366;strokeWidth=2;fontSize=11;" edge="1" parent="1" source="4" target="6">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="14" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="6" target="7">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="15" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="7" target="8">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="16" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#b85450;strokeWidth=2;" edge="1" parent="1" source="5" target="8">
<mxGeometry relative="1" as="geometry" />
</mxCell>
</root>
</mxGraphModel>
</diagram>
</mxfile>
Example 2: Three-Tier Logical Architecture
User Request: "Create a logical architecture diagram for a web application with presentation, business logic, and data tiers."
Generated XML:
<mxfile host="app.diagrams.net" agent="Claude" version="24.7.17">
<diagram id="three-tier-1" name="Three-Tier Architecture">
<mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<!-- User -->
<mxCell id="2" value="User"
style="ellipse;whiteSpace=wrap;html=1;fillColor=#ffe0b2;strokeColor=#f57c00;fontSize=12;"
vertex="1" parent="1">
<mxGeometry x="40" y="340" width="60" height="40" as="geometry" />
</mxCell>
<!-- Presentation Layer -->
<mxCell id="3" value="Presentation Layer"
style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;fontSize=14;fontStyle=1;"
vertex="1" parent="1">
<mxGeometry x="160" y="40" width="300" height="180" as="geometry" />
</mxCell>
<mxCell id="4" value="Web
Browser"
style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;"
vertex="1" parent="3">
<mxGeometry x="20" y="30" width="80" height="50" as="geometry" />
</mxCell>
<mxCell id="5" value="Mobile
App"
style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;"
vertex="1" parent="3">
<mxGeometry x="120" y="30" width="80" height="50" as="geometry" />
</mxCell>
<mxCell id="6" value="API
Client"
style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;"
vertex="1" parent="3">
<mxGeometry x="200" y="30" width="80" height="50" as="geometry" />
</mxCell>
<!-- Application Layer -->
<mxCell id="7" value="Application Layer"
style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;fontSize=14;fontStyle=1;"
vertex="1" parent="1">
<mxGeometry x="160" y="260" width="300" height="180" as="geometry" />
</mxCell>
<mxCell id="8" value="API
Gateway"
style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=12;"
vertex="1" parent="7">
<mxGeometry x="20" y="30" width="80" height="50" as="geometry" />
</mxCell>
<mxCell id="9" value="Business
Logic"
style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;"
vertex="1" parent="7">
<mxGeometry x="110" y="30" width="80" height="50" as="geometry" />
</mxCell>
<mxCell id="10" value="Auth
Service"
style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=12;"
vertex="1" parent="7">
<mxGeometry x="200" y="30" width="80" height="50" as="geometry" />
</mxCell>
<!-- Data Layer -->
<mxCell id="11" value="Data Layer"
style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;fontSize=14;fontStyle=1;"
vertex="1" parent="1">
<mxGeometry x="160" y="480" width="300" height="180" as="geometry" />
</mxCell>
<mxCell id="12" value="Primary
Database"
style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;fillColor=#e1f5fe;strokeColor=#0277bd;fontSize=12;"
vertex="1" parent="11">
<mxGeometry x="20" y="30" width="60" height="80" as="geometry" />
</mxCell>
<mxCell id="13" value="Read
Replica"
style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;fillColor=#e1f5fe;strokeColor=#0277bd;fontSize=12;"
vertex="1" parent="11">
<mxGeometry x="100" y="30" width="60" height="80" as="geometry" />
</mxCell>
<mxCell id="14" value="Cache
(Redis)"
style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;fillColor=#fff3e0;strokeColor=#e65100;fontSize=12;"
vertex="1" parent="11">
<mxGeometry x="180" y="30" width="60" height="80" as="geometry" />
</mxCell>
<!-- Connectors -->
<mxCell id="20" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="2" target="4">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="21" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="4" target="8">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="22" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="8" target="9">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="23" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="9" target="12">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="24" value="query" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=open;endFill=0;strokeColor=#666666;strokeWidth=1;fontSize=10;dashed=1;" edge="1" parent="1" source="9" target="14">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="25" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="9" target="13">
<mxGeometry relative="1" as="geometry" />
</mxCell>
</root>
</mxGraphModel>
</diagram>
</mxfile>
Example 3: Microservice Communication Flow
User Request: "Create a logical diagram showing microservice architecture with API gateway, multiple services, and message queue for async communication."
Reference: See diagram-templates.md for complete microservice template.
Constraints and Warnings
Critical Constraints
- XML validity: Always close tags properly and escape special characters
- Unique IDs: All cell IDs must be unique (except parent "0" and "1")
- Valid references: Source/target must reference existing cell IDs
- Positive coordinates: All x, y values must be >= 0
Warnings
- XML files must be well-formed or will fail to open in draw.io
- Invalid parent references cause elements to disappear
- Negative coordinates place elements outside visible canvas
Best Practices
Visual Guidelines
- Use consistent colors per element type
- Keep arrows straight with minimal bends
- Place labels at least 20px from arrow lines
- Group related elements in containers
- Use 12-14px font for labels, 10-11px for annotations
Accessibility
- Use high contrast colors
- Don't rely solely on color to convey meaning
- Include text labels for all shapes
- Add annotations for complex flows
相关 Skills
可观测性设计
by alirezarezvani
面向生产系统规划可落地的可观测性体系,串起指标、日志、链路追踪与 SLI/SLO、错误预算、告警和仪表盘设计,适合搭建监控平台与优化故障响应。
✎ 把监控、日志、链路追踪串起来,帮助团队从设计阶段构建可观测性,排障更快、系统演进更稳。
AWS架构师
by alirezarezvani
面向初创团队规划 AWS 架构,覆盖 Serverless、ECS、Aurora 等方案,可生成 CloudFormation 模板,兼顾成本优化、CI/CD 搭建与迁移上云。
✎ 特别适合创业团队,用无服务器模式和 IaC 模板快速搭好 AWS 架构,连成本优化、CI/CD 与迁移路径都能一并规划。
环境密钥管理
by alirezarezvani
统一梳理dev/staging/prod的.env和密钥流程,自动生成.env.example、校验必填变量、扫描Git历史泄漏,并联动Vault、AWS SSM、1Password、Doppler完成轮换。
✎ 统一管理环境变量、密钥与配置,减少泄露和部署混乱,安全治理与团队协作一起做好,DevOps 场景很省心。
相关 MCP 服务
kubefwd
编辑精选by txn2
kubefwd 是让 AI 帮你批量转发 Kubernetes 服务到本地的开发神器。
✎ 微服务开发者最头疼的本地调试问题,它一键搞定——自动分配 IP 避免端口冲突,还能用自然语言查询状态。但依赖 AI 工作流,纯命令行爱好者可能觉得不够直接。
Cloudflare
编辑精选by Cloudflare
Cloudflare MCP Server 是让你用自然语言管理 Workers、KV 和 R2 等云资源的工具。
✎ 这个工具解决了开发者频繁切换控制台和文档的痛点,特别适合那些在 Cloudflare 上部署无服务器应用、需要快速调试或管理配置的团队。不过,由于它依赖多个子服务器,初次设置可能有点繁琐,建议先从 Workers Bindings 这类核心功能入手。
Terraform
编辑精选by hashicorp
Terraform MCP Server 是让 AI 助手直接操作 Terraform Registry 和 HCP Terraform 的桥梁。
✎ 如果你经常在 Terraform 里翻文档找模块配置,这个服务器能省不少时间——直接问 Claude 就能生成准确的代码片段。最适合管理多云基础设施的团队,但注意它目前只适合本地使用,别在生产环境里暴露 HTTP 端点。