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

Skill

drawio-flowchart

From partme-ai-full-stack-skills

Creates Draw.io flowcharts, swim lane diagrams, and business process diagrams for visualizing workflows, decision trees, and processes. Supports shapes, connectors, auto-layout, and PNG/SVG/PDF export.

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

process-diagrams

workflow-visualization

When to use this skill

Use this skill whenever the user wants to:

Create flowcharts for business processes or technical workflows
Design swim lane diagrams showing responsibilities across teams or systems
Visualize decision trees with conditional branching
Export process diagrams for documentation or presentations

How to use this skill

Workflow

Start from template - Choose Flowchart template in Draw.io or start blank
Add shapes - Use standard shapes: rounded rectangle (start/end), rectangle (process), diamond (decision)
Connect with arrows - Label decision branches (Yes/No) and flow direction
Apply auto-layout - Use Format > Layout > Vertical/Horizontal Tree for clean alignment
Export - Save as .drawio for editing; export PNG/SVG/PDF for sharing

Quick-Start Example: Order Processing Flowchart (XML)

<mxGraphModel>
  <root>
    <mxCell id="0"/><mxCell id="1" parent="0"/>
    <!-- Start -->
    <mxCell id="2" value="Order Received" style="ellipse;fillColor=#d5e8d4;" vertex="1" parent="1">
      <mxGeometry x="200" y="20" width="120" height="40" as="geometry"/>
    </mxCell>
    <!-- Decision -->
    <mxCell id="3" value="In Stock?" style="rhombus;fillColor=#fff2cc;" vertex="1" parent="1">
      <mxGeometry x="200" y="100" width="120" height="60" as="geometry"/>
    </mxCell>
    <!-- Process -->
    <mxCell id="4" value="Ship Order" style="rounded=0;fillColor=#dae8fc;" vertex="1" parent="1">
      <mxGeometry x="100" y="200" width="120" height="40" as="geometry"/>
    </mxCell>
    <mxCell id="5" value="Backorder" style="rounded=0;fillColor=#f8cecc;" vertex="1" parent="1">
      <mxGeometry x="300" y="200" width="120" height="40" as="geometry"/>
    </mxCell>
    <!-- Arrows -->
    <mxCell id="6" style="" edge="1" source="2" target="3" parent="1"/>
    <mxCell id="7" value="Yes" edge="1" source="3" target="4" parent="1"/>
    <mxCell id="8" value="No" edge="1" source="3" target="5" parent="1"/>
  </root>
</mxGraphModel>

Swim Lane Diagram

For cross-team processes, use Draw.io's swim lane containers:

Insert > Advanced > Pool/Lane
Drag process steps into the appropriate lane
Connect steps across lanes with labeled arrows

Best Practices

Consistent flow direction - Use top-to-bottom or left-to-right consistently
Standard shapes - Rectangles for processes, diamonds for decisions, ovals for start/end
Label decision branches - Always label Yes/No or condition text on decision arrows
One process per diagram - Keep diagrams focused; split complex flows into sub-processes
Include a legend - Add a key explaining shape meanings and color coding

Keywords

draw.io, diagrams.net, flowchart, swim lane, business process, decision tree, workflow diagram, 流程图, 泳道图, process diagram