Setting the file. One moment.
Skill 157 · Excalidraw Diagram Generator
Subchapter 157.1
references/element-types.mdMarkdown9 KBView on GitHub
Detailed specifications for each Excalidraw element type with visual examples and use cases.
| Type | Visual | Primary Use | Text Support |
|---|---|---|---|
rectangle | □ | Boxes, containers, process steps | ✅ Yes |
ellipse | ○ | Emphasis, terminals, states | ✅ Yes |
diamond | ◇ | Decision points, choices | ✅ Yes |
arrow | → | Directional flow, relationships | ❌ No (use separate text) |
line | — | Connections, dividers | ❌ No |
text | A | Labels, annotations, titles | ✅ (Its purpose) |
Best for: Process steps, entities, data stores, components
{
type: "rectangle",
roundness: { type: 3 }, // Rounded corners
text: "Step Name", // Optional embedded text
fontSize: 20,
textAlign: "center",
verticalAlign: "middle"
}| Scenario | Configuration |
|---|---|
| Process step | Green background (#b2f2bb), centered text |
| Entity/Object | Blue background (#a5d8ff), medium size |
| System component | Light color, descriptive text |
| Data store | Gray/white, database-like label |
| Content | Width | Height |
|---|---|---|
| Single word | 120-150px | 60-80px |
| Short phrase (2-4 words) | 180-220px | 80-100px |
| Sentence | 250-300px | 100-120px |
{
"type": "rectangle",
"x": 100,
"y": 100,
"width": 200,
"height": 80,
"backgroundColor": "#b2f2bb",
"text": "Validate Input",
"fontSize": 20,
"textAlign": "center",
"verticalAlign": "middle",
"roundness": { "type": 3 }
}Best for: Start/end points, states, emphasis circles
{
type: "ellipse",
text: "Start",
fontSize: 18,
textAlign: "center",
verticalAlign: "middle"
}| Scenario | Configuration |
|---|---|
| Flow start | Light green, “Start” text |
| Flow end | Light red, “End” text |
| State | Soft color, state name |
| Highlight | Bright color, emphasis text |
For circular shapes, use width === height:
| Content | Diameter |
|---|---|
| Icon/Symbol | 60-80px |
| Short text | 100-120px |
| Longer text | 150-180px |
{
"type": "ellipse",
"x": 100,
"y": 100,
"width": 120,
"height": 120,
"backgroundColor": "#d0f0c0",
"text": "Start",
"fontSize": 18,
"textAlign": "center",
"verticalAlign": "middle"
}Best for: Decision points, conditional branches
{
type: "diamond",
text: "Valid?",
fontSize: 18,
textAlign: "center",
verticalAlign": "middle"
}| Scenario | Text Example |
|---|---|
| Yes/No decision | “Is Valid?”, “Exists?” |
| Multiple choice | “Type?”, “Status?” |
| Conditional | “Score > 50?” |
Diamonds need more space than rectangles for the same text:
| Content | Width | Height |
|---|---|---|
| Yes/No | 120-140px | 120-140px |
| Short question | 160-180px | 160-180px |
| Longer question | 200-220px | 200-220px |
{
"type": "diamond",
"x": 100,
"y": 100,
"width": 150,
"height": 150,
"backgroundColor": "#ffe4a3",
"text": "Valid?",
"fontSize": 18,
"textAlign": "center",
"verticalAlign": "middle"
}Best for: Flow direction, relationships, dependencies
{
type: "arrow",
points: [[0, 0], [endX, endY]], // Relative coordinates
roundness: { type: 2 }, // Curved
startBinding: null, // Or { elementId, focus, gap }
endBinding: null
}{
"x": 100,
"y": 150,
"width": 200,
"height": 0,
"points": [[0, 0], [200, 0]]
}{
"x": 200,
"y": 100,
"width": 0,
"height": 150,
"points": [[0, 0], [0, 150]]
}{
"x": 100,
"y": 100,
"width": 200,
"height": 150,
"points": [[0, 0], [200, 150]]
}| Style | strokeStyle | strokeWidth | Use Case |
|---|---|---|---|
| Normal flow | "solid" | 2 | Standard connections |
| Optional/Weak | "dashed" | 2 | Optional paths |
| Important | "solid" | 3-4 | Emphasized flow |
| Dotted | "dotted" | 2 | Indirect relationships |
Use separate text elements positioned near arrow midpoint:
[
{
"type": "arrow",
"id": "arrow1",
"x": 100,
"y": 150,
"points": [[0, 0], [200, 0]]
},
{
"type": "text",
"x": 180, // Near midpoint
"y": 130, // Above arrow
"text": "sends",
"fontSize": 14
}
]Best for: Non-directional connections, dividers, borders
{
type: "line",
points: [[0, 0], [x2, y2], [x3, y3], ...],
roundness: null // Or { type: 2 } for curved
}| Scenario | Configuration |
|---|---|
| Divider | Horizontal, thin stroke |
| Border | Closed path (polygon) |
| Connection | Multi-point path |
| Underline | Short horizontal line |
{
"type": "line",
"x": 100,
"y": 100,
"points": [
[0, 0],
[100, 50],
[200, 0]
]
}Best for: Labels, titles, annotations, standalone text
{
type: "text",
text: "Label text",
fontSize: 20,
fontFamily: 1, // 1=Virgil, 2=Helvetica, 3=Cascadia
textAlign: "left",
verticalAlign: "top"
}| Purpose | Font Size |
|---|---|
| Main title | 28-36 |
| Section header | 24-28 |
| Element label | 18-22 |
| Annotation | 14-16 |
| Small note | 12-14 |
// Approximate width
const width = text.length * fontSize * 0.6;
// Approximate height (single line)
const height = fontSize * 1.2;
// Multi-line
const lines = text.split('\n').length;
const height = fontSize * 1.2 * lines;| Position | textAlign | verticalAlign | Use Case |
|---|---|---|---|
| Top-left | "left" | "top" | Default labels |
| Centered | "center" | "middle" | Titles |
| Bottom-right | "right" | "bottom" | Footnotes |
{
"type": "text",
"x": 100,
"y": 50,
"width": 400,
"height": 40,
"text": "System Architecture",
"fontSize": 32,
"fontFamily": 2,
"textAlign": "center",
"verticalAlign": "top"
}{
"type": "text",
"x": 150,
"y": 200,
"width": 100,
"height": 20,
"text": "User input",
"fontSize": 14,
"fontFamily": 1,
"textAlign": "left",
"verticalAlign": "top"
}[
{
"type": "rectangle",
"id": "box1",
"x": 100,
"y": 100,
"width": 200,
"height": 100,
"text": "Component",
"textAlign": "center",
"verticalAlign": "middle"
}
][
{
"type": "rectangle",
"id": "box1",
"x": 100,
"y": 100,
"width": 150,
"height": 80,
"text": "Step 1"
},
{
"type": "arrow",
"id": "arrow1",
"x": 250,
"y": 140,
"points": [[0, 0], [100, 0]]
},
{
"type": "rectangle",
"id": "box2",
"x": 350,
"y": 100,
"width": 150,
"height": 80,
"text": "Step 2"
}
][
{
"type": "diamond",
"id": "decision",
"x": 100,
"y": 100,
"width": 140,
"height": 140,
"text": "Valid?"
},
{
"type": "arrow",
"id": "yes-arrow",
"x": 240,
"y": 170,
"points": [[0, 0], [60, 0]]
},
{
"type": "text",
"id": "yes-label",
"x": 250,
"y": 150,
"text": "Yes",
"fontSize": 14
},
{
"type": "rectangle",
"id": "yes-box",
"x": 300,
"y": 140,
"width": 120,
"height": 60,
"text": "Process"
}
]| When you need… | Use this element |
|---|---|
| Process box | rectangle with text |
| Decision point | diamond with question |
| Flow direction | arrow |
| Start/End | ellipse |
| Title/Header | text (large font) |
| Annotation | text (small font) |
| Non-directional link | line |
| Divider | line (horizontal) |
Source