# Drawio Impl Uml

> >

- **Type:** Skill
- **Install:** `agentstack add skill-impertio-studio-draw-io-claude-skill-package-drawio-impl-uml`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [Impertio-Studio](https://agentstack.voostack.com/s/impertio-studio)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [Impertio-Studio](https://github.com/Impertio-Studio)
- **Source:** https://github.com/Impertio-Studio/Draw.io-Claude-Skill-Package/tree/main/skills/source/drawio-impl/drawio-impl-uml

## Install

```sh
agentstack add skill-impertio-studio-draw-io-claude-skill-package-drawio-impl-uml
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Draw.io UML Diagram Implementation

## Purpose

This skill enables correct generation of UML diagrams in Draw.io mxGraph XML. It covers the five most common UML diagram types: class, sequence, use case, state machine, and activity. The most common AI mistake is using generic arrows (`endArrow=classic`) instead of UML-specific connector styles (open diamond for aggregation, filled diamond for composition, hollow triangle for generalization).

## Critical Rules (Memorize These)

1. **ALWAYS use `endArrow=block;endFill=0` for generalization/inheritance** — the hollow triangle. NEVER use `endFill=1` which produces a filled triangle (wrong UML semantics).
2. **ALWAYS use `startArrow=diamond;startFill=0` for aggregation** — the open diamond. NEVER use `startFill=1` which produces composition instead.
3. **ALWAYS use `startArrow=diamond;startFill=1` for composition** — the filled diamond. The fill distinguishes composition from aggregation.
4. **ALWAYS use `dashed=1` for dependency and realization edges** — solid lines are WRONG for these relationship types.
5. **ALWAYS use `shape=umlLifeline;perimeter=lifelinePerimeter` for sequence diagram participants** — NEVER use plain rectangles with manual dashed lines.
6. **ALWAYS use `shape=umlActor` for UML actors** — NEVER use `shape=ellipse` or stick-figure images.
7. **ALWAYS use the 3-compartment swimlane pattern for UML classes** — class name header, attributes compartment, operations compartment, separated by `line` cells.
8. **ALWAYS include both structural cells** (`id="0"` and `id="1"` with `parent="0"`) in every diagram.
9. **ALWAYS use `endArrow=open;endFill=0;dashed=1` for return messages** in sequence diagrams — NEVER use solid lines for returns.
10. **ALWAYS place use cases inside the system boundary container** — NEVER place them at `parent="1"` when a system boundary exists.

## UML Relationship Arrow Styles

### The 6 Core Relationship Types

| Relationship | startArrow | endArrow | dashed | startFill | endFill | Visual |
|-------------|-----------|----------|--------|-----------|---------|--------|
| Association | none | none | 0 | — | — | Plain line |
| Directed Association | none | open | 0 | — | 1 | Line + open arrow |
| Generalization | none | block | 0 | — | 0 | Line + hollow triangle |
| Realization | none | block | 1 | — | 0 | Dashed + hollow triangle |
| Aggregation | diamond | none | 0 | 0 | — | Open diamond + line |
| Composition | diamond | none | 0 | 1 | — | Filled diamond + line |
| Dependency | none | open | 1 | — | 1 | Dashed + open arrow |

### Edge Style Strings

**Association (plain):**
```
endArrow=none;html=1;edgeStyle=orthogonalEdgeStyle;
```

**Directed Association:**
```
endArrow=open;endFill=1;html=1;edgeStyle=orthogonalEdgeStyle;
```

**Generalization (inheritance):**
```
endArrow=block;endFill=0;html=1;edgeStyle=orthogonalEdgeStyle;
```

**Realization (interface implementation):**
```
endArrow=block;endFill=0;dashed=1;html=1;edgeStyle=orthogonalEdgeStyle;
```

**Aggregation (has-a, shared):**
```
startArrow=diamond;startFill=0;endArrow=none;html=1;edgeStyle=orthogonalEdgeStyle;
```

**Composition (has-a, owned):**
```
startArrow=diamond;startFill=1;endArrow=none;html=1;edgeStyle=orthogonalEdgeStyle;
```

**Dependency (uses):**
```
endArrow=open;endFill=1;dashed=1;html=1;edgeStyle=orthogonalEdgeStyle;
```

## Class Diagram

### 3-Compartment Class Structure

A UML class uses `swimlane` with `childLayout=stackLayout` containing three child zones separated by `line` cells.

**Container style (class header):**
```
swimlane;fontStyle=1;align=center;startSize=26;container=1;collapsible=0;childLayout=stackLayout;
```

**Attributes compartment:**
```
text;strokeColor=none;fillColor=none;align=left;verticalAlign=top;spacingLeft=4;spacingRight=4;overflow=hidden;rotatable=0;whiteSpace=wrap;html=0;
```

**Separator line:**
```
line;strokeWidth=1;fillColor=none;align=left;verticalAlign=middle;spacingTop=-1;spacingLeft=3;spacingRight=10;rotatable=0;labelPosition=left;points=[];portConstraint=eastwest;
```

**Operations compartment:**
```
text;strokeColor=none;fillColor=none;align=left;verticalAlign=top;spacingLeft=4;spacingRight=4;overflow=hidden;rotatable=0;whiteSpace=wrap;html=0;
```

### UML Visibility Prefixes

| Prefix | Meaning |
|--------|---------|
| `+` | Public |
| `-` | Private |
| `#` | Protected |
| `~` | Package |

### Attribute Format

```
visibility name: Type
```

Example: `- id: int` or `+ getName(): String`

### Class Dimensions

| Component | Width | Height | Notes |
|-----------|-------|--------|-------|
| Class container | 200 | Calculated | startSize + attr_height + sep + ops_height |
| Header band | 200 | 26 (startSize) | Bold class name |
| Attributes cell | 200 | attr_count * 18 | ~18px per attribute line |
| Separator | 200 | 8 | Fixed thin line |
| Operations cell | 200 | ops_count * 18 | ~18px per operation line |

Use `
` for newlines within attribute/operation text values (`html=0` mode).

### Abstract and Interface Classes

**Abstract class** — add `fontStyle=3;` (bold + italic) to the container and prefix name with `>`:
```
swimlane;fontStyle=3;align=center;startSize=26;container=1;collapsible=0;childLayout=stackLayout;
```

**Interface** — prefix name with `>` and use `fontStyle=3;`:
```
swimlane;fontStyle=3;align=center;startSize=26;container=1;collapsible=0;childLayout=stackLayout;
```

## Sequence Diagram

### Lifeline Shape

```
shape=umlLifeline;perimeter=lifelinePerimeter;whiteSpace=wrap;html=1;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;size=40;
```

Key properties:
- `shape=umlLifeline` — REQUIRED. Renders the rectangle header + dashed vertical line.
- `perimeter=lifelinePerimeter` — REQUIRED. Enables correct connection points along the lifeline.
- `size=40` — height of the participant header box in pixels.
- `container=1` — allows activation bars as children.
- Total `height` of the mxGeometry determines how far the dashed line extends.

### Lifeline Dimensions

| Property | Value | Notes |
|----------|-------|-------|
| Width | 100 | Standard lifeline width |
| Height | 300-500 | Total lifeline length (adjust per diagram complexity) |
| size | 40 | Header box height |
| Horizontal spacing | 200 | Between lifeline centers |

### Message Types

| Message Type | endArrow | endFill | dashed | Visual |
|-------------|----------|---------|--------|--------|
| Synchronous | block | 1 | 0 | Solid + filled arrow |
| Asynchronous | open | 1 | 0 | Solid + open arrow |
| Return | open | 0 | 1 | Dashed + open arrow |
| Create | open | 1 | 0 | Solid + open arrow (to new lifeline) |
| Destroy | none | — | 0 | Solid line + X at target |

**Synchronous message style:**
```
html=1;verticalAlign=bottom;endArrow=block;endFill=1;
```

**Asynchronous message style:**
```
html=1;verticalAlign=bottom;endArrow=open;endFill=1;
```

**Return message style:**
```
html=1;verticalAlign=bottom;endArrow=open;endFill=0;dashed=1;
```

### Message Positioning

Messages use absolute `sourcePoint` and `targetPoint` coordinates (NOT `source`/`target` cell references):

```xml

  
    
    
  

```

- `sourcePoint.x` = source lifeline center (lifeline x + width/2).
- `targetPoint.x` = target lifeline center.
- Both points share the same `y` value for horizontal messages.
- Increment `y` by 40-50px between consecutive messages.

### Activation Bars

Activation bars are child cells of their lifeline:

```xml

  

```

- `x=45` centers the 10px-wide bar on a 100px-wide lifeline ((100-10)/2 = 45).
- `y` is relative to the lifeline top (NOT absolute).
- `height` spans from first incoming message to last outgoing message.

## Use Case Diagram

### Actor Shape

```
shape=umlActor;verticalLabelPosition=bottom;verticalAlign=top;html=1;outlineConnect=0;
```

Dimensions: width=30, height=55. ALWAYS place actors outside the system boundary.

### Use Case (Ellipse)

```
ellipse;whiteSpace=wrap;html=1;
```

Dimensions: width=180, height=60. ALWAYS place inside the system boundary container.

### System Boundary

```
rounded=1;whiteSpace=wrap;html=1;container=1;collapsible=0;fillColor=none;strokeColor=#666666;strokeWidth=2;dashed=1;verticalAlign=top;fontStyle=1;fontSize=14;
```

The system boundary is a `container=1` cell. Use cases MUST be children of this container (`parent=""`).

### Use Case Relationships

| Relationship | Style | Notes |
|-------------|-------|-------|
| Actor-to-UseCase | `endArrow=none;html=1;` | Plain line, no arrows |
| Include | `endArrow=open;endFill=1;dashed=1;html=1;` | Dashed + label `>` |
| Extend | `endArrow=open;endFill=1;dashed=1;html=1;` | Dashed + label `>` |
| Generalization | `endArrow=block;endFill=0;html=1;` | Hollow triangle |

## State Machine Diagram

### State Shapes

**Initial state (filled circle):**
```
ellipse;fillColor=#000000;strokeColor=#000000;
```
Dimensions: width=30, height=30.

**Regular state (with actions):**
```
rounded=1;whiteSpace=wrap;html=1;align=center;verticalAlign=top;arcSize=15;
```

Use HTML in the value for state compartments:
```
StateNameentry / action()exit / action()
```

**Final state (bullseye):**
```
ellipse;html=1;shape=doubleCircle;fillColor=#000000;strokeColor=#000000;
```
Dimensions: width=30, height=30.

### Transition Edge

```
endArrow=open;endFill=1;html=1;
```

Label format: `event [guard] / action`

## Activity Diagram

### Activity Shapes

**Initial node:** Same as state machine initial state.

**Action node:**
```
rounded=1;whiteSpace=wrap;html=1;
```

**Decision node (diamond):**
```
rhombus;whiteSpace=wrap;html=1;
```
Dimensions: width=40, height=40. Label outgoing edges with `[guard]`.

**Fork/Join bar (horizontal):**
```
shape=line;html=1;strokeWidth=6;strokeColor=#000000;fillColor=#000000;
```
Dimensions: width=200, height=10.

**Fork/Join bar (vertical):**
```
shape=line;html=1;strokeWidth=6;strokeColor=#000000;fillColor=#000000;direction=south;
```
Dimensions: width=10, height=200.

**Final node:** Same as state machine final state.

### Activity Edge

```
endArrow=open;endFill=1;html=1;edgeStyle=orthogonalEdgeStyle;
```

## Color Conventions

| Element | Fill Color | Stroke Color |
|---------|-----------|-------------|
| Primary class/lifeline | `#dae8fc` (light blue) | `#6c8ebf` |
| Secondary class/lifeline | `#d5e8d4` (light green) | `#82b366` |
| Tertiary class/lifeline | `#fff2cc` (light yellow) | `#d6b656` |
| Abstract/interface | `#e1d5e7` (light purple) | `#9673a6` |
| System boundary | `none` | `#666666` |
| Initial/final state | `#000000` | `#000000` |

## Layout Strategy

### Class Diagrams
- Horizontal spacing: 120-160px between classes.
- Vertical spacing: 100-140px for inheritance hierarchies.
- Place parent classes ABOVE child classes for generalization.
- Place associated classes side by side.

### Sequence Diagrams
- Lifeline horizontal spacing: 200px center-to-center.
- Message vertical spacing: 40-50px between messages.
- Total lifeline height: 40 (header) + (message_count * 50) + 60 (margin).

### Use Case Diagrams
- Actors 80-120px outside the system boundary.
- Use cases spaced 80px vertically within the boundary.
- System boundary sized to fit all use cases with 40px padding.

## Checklist: Before Outputting a UML Diagram

1. Every class uses `swimlane;container=1;childLayout=stackLayout;` with 3 compartments.
2. Every class has a `line` separator between attributes and operations.
3. Every generalization edge uses `endArrow=block;endFill=0` (hollow triangle).
4. Every aggregation edge uses `startArrow=diamond;startFill=0` (open diamond).
5. Every composition edge uses `startArrow=diamond;startFill=1` (filled diamond).
6. Every dependency/realization edge uses `dashed=1`.
7. Every sequence lifeline uses `shape=umlLifeline;perimeter=lifelinePerimeter`.
8. Every return message uses `dashed=1;endArrow=open;endFill=0`.
9. Every actor uses `shape=umlActor` — NEVER `shape=ellipse`.
10. Every use case is a child of the system boundary container.
11. Both structural cells (`id="0"` and `id="1"`) are present.
12. All cell IDs are unique across the entire diagram.
13. All edge `source`/`target` attributes (or sourcePoint/targetPoint) are valid.

## Cross-References

- **XML fundamentals:** See `drawio-core-xml-format` for file structure and structural cells.
- **Style syntax:** See `drawio-syntax-styles` for the complete style property reference.
- **Connection details:** See `drawio-syntax-connections` for edge routing and waypoints.
- **Geometry:** See `drawio-core-geometry` for coordinate system and positioning.
- **Swimlanes:** See `drawio-impl-swimlanes` for container and lane patterns.

## Reference Links

- [Complete Reference](references/methods.md)
- [Working Examples](references/examples.md)
- [Anti-Patterns](references/anti-patterns.md)

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [Impertio-Studio](https://github.com/Impertio-Studio)
- **Source:** [Impertio-Studio/Draw.io-Claude-Skill-Package](https://github.com/Impertio-Studio/Draw.io-Claude-Skill-Package)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-impertio-studio-draw-io-claude-skill-package-drawio-impl-uml
- Seller: https://agentstack.voostack.com/s/impertio-studio
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.