What diagram types does pactkit-draw support?

Architecture, dataflow, and deployment diagrams generated as Draw.io XML.

What rules govern the XML output?

Anti-bug rules require html=1;whiteSpace=wrap; on every mxCell style, unique IDs with n_, e_, c_ prefixes, edges with valid source/target, and container nodes with container=1.

How can I preview the generated diagram?

If the open_drawio_xml tool is available, the plugin writes the .drawio file and opens it in Draw.io for immediate preview; otherwise the file is saved to disk.

pactkit-draw

npx machina-cli add skill pactkit/claude-code-plugin/pactkit-draw --openclaw

Files (1)

SKILL.md

1.6 KB

PactKit Draw

Generate system architecture diagrams using Draw.io XML. Supports architecture, dataflow, and deployment diagram types.

When Invoked

Plan Phase 2 (Design): Generate architecture diagrams on demand.
Design Phase 2 (Architecture): Visualize system-level design.

Protocol

1. Detect Diagram Type

Type	Trigger Keywords	Layout
architecture	architecture, system, layered	Top -> Bottom
dataflow	dataflow, process, pipeline	Left -> Right
deployment	deployment, infra, cloud, k8s	Grouped

2. Identify Components

Classify each component into a style role (Input, Process, Decision, Output, Storage, Container, External).

3. Generate XML

Write the .drawio file following the Enterprise Style Dictionary and Anti-Bug Rules.

Anti-Bug Rules

Every mxCell style MUST include html=1;whiteSpace=wrap;.
Every id MUST be unique (use prefixes: n_, e_, c_).
Edge mxCell MUST have valid source and target attributes.
Container nodes MUST include container=1 in their style.

MCP Mode (Conditional)

IF open_drawio_xml tool is available (Draw.io MCP):

Generate XML as usual and write to .drawio file (primary output).
Call open_drawio_xml with the generated XML content to open it in Draw.io editor for instant preview.
Optionally call open_drawio_mermaid to open existing .mmd files in Draw.io for interactive editing.

IF Draw.io MCP tools are NOT available:

Fallback to the current behavior — write .drawio file to disk only.

Source

git clone https://github.com/pactkit/claude-code-plugin/blob/main/pactkit-plugin/skills/pactkit-draw/SKILL.mdView on GitHub

Overview

pactkit-draw generates Draw.io XML diagrams to visualize architecture, data flows, and deployment layouts. It enables on-demand design visuals during plan and design phases, helping teams align on system structure before implementation.

How This Skill Works

The tool detects the diagram type from keywords (architecture, dataflow, deployment), classifies components into roles such as Input, Process, Decision, Output, Storage, Container, and External, and then emits a Draw.io XML file that follows the Enterprise Style Dictionary and anti-bug rules. It ensures unique IDs (n_ for nodes, e_ for edges, c_ for containers) and includes container styling when applicable.

When to Use It

Plan Phase 2: generate architecture diagrams on demand
Design Phase 2: visualize system-level architecture
Create dataflow diagrams for processes and pipelines
Draft deployment and infrastructure diagrams for cloud or Kubernetes
Document system components with standardized visuals

Quick Start

Step 1: Detect diagram type from keywords like architecture, dataflow, or deployment
Step 2: Identify components and assign roles (Input, Process, Storage, Container, External)
Step 3: Generate the Draw.io XML and save as a .drawio file; if open_drawio_xml is available, preview in Draw.io

Best Practices

Detect diagram type from keywords to select layout and style (architecture: top-to-bottom; dataflow: left-to-right; deployment: grouped).
Classify components into explicit styles: Input, Process, Decision, Output, Storage, Container, External.
Always include html=1;whiteSpace=wrap; in every mxCell style.
Ensure IDs are unique using prefixes n_, e_, c_ for nodes, edges, and containers.
Ensure container nodes include container=1 in their style.

Example Use Cases

Architecture diagram for a microservices-based app with containers and external services
Dataflow diagram illustrating an ETL pipeline from source to warehouse
Deployment diagram showing a Kubernetes cluster and cloud infrastructure
System design diagram for a user onboarding workflow with inputs, processing, and storage
Enterprise diagram mapping internal components to external partners

Frequently Asked Questions

Add this skill to your agents