202 lines
3.2 KiB
Markdown
202 lines
3.2 KiB
Markdown
# Excalidraw JSON Schema Reference
|
|
|
|
## Color Palette
|
|
|
|
### Primary Colors
|
|
| Purpose | Color | Hex |
|
|
|---------|-------|-----|
|
|
| Main Title | Deep Blue | `#1e40af` |
|
|
| Subtitle | Medium Blue | `#3b82f6` |
|
|
| Body Text | Dark Gray | `#374151` |
|
|
| Emphasis | Orange | `#f59e0b` |
|
|
| Success | Green | `#10b981` |
|
|
| Warning | Red | `#ef4444` |
|
|
|
|
### Background Colors
|
|
| Purpose | Color | Hex |
|
|
|---------|-------|-----|
|
|
| Light Blue | Background | `#dbeafe` |
|
|
| Light Gray | Neutral | `#f3f4f6` |
|
|
| Light Orange | Highlight | `#fef3c7` |
|
|
| Light Green | Success | `#d1fae5` |
|
|
| Light Purple | Accent | `#ede9fe` |
|
|
|
|
## Element Types
|
|
|
|
### Rectangle
|
|
```json
|
|
{
|
|
"type": "rectangle",
|
|
"id": "unique-id",
|
|
"x": 100,
|
|
"y": 100,
|
|
"width": 200,
|
|
"height": 80,
|
|
"strokeColor": "#1e40af",
|
|
"backgroundColor": "#dbeafe",
|
|
"fillStyle": "solid",
|
|
"strokeWidth": 2,
|
|
"roughness": 1,
|
|
"opacity": 100,
|
|
"roundness": { "type": 3 }
|
|
}
|
|
```
|
|
|
|
### Text
|
|
```json
|
|
{
|
|
"type": "text",
|
|
"id": "unique-id",
|
|
"x": 150,
|
|
"y": 130,
|
|
"text": "Content here",
|
|
"fontSize": 20,
|
|
"fontFamily": 5,
|
|
"textAlign": "center",
|
|
"verticalAlign": "middle",
|
|
"strokeColor": "#1e40af",
|
|
"backgroundColor": "transparent"
|
|
}
|
|
```
|
|
|
|
### Arrow
|
|
```json
|
|
{
|
|
"type": "arrow",
|
|
"id": "unique-id",
|
|
"x": 300,
|
|
"y": 140,
|
|
"width": 100,
|
|
"height": 0,
|
|
"points": [[0, 0], [100, 0]],
|
|
"strokeColor": "#374151",
|
|
"strokeWidth": 2,
|
|
"startArrowhead": null,
|
|
"endArrowhead": "arrow"
|
|
}
|
|
```
|
|
|
|
### Ellipse
|
|
```json
|
|
{
|
|
"type": "ellipse",
|
|
"id": "unique-id",
|
|
"x": 100,
|
|
"y": 100,
|
|
"width": 120,
|
|
"height": 120,
|
|
"strokeColor": "#10b981",
|
|
"backgroundColor": "#d1fae5",
|
|
"fillStyle": "solid"
|
|
}
|
|
```
|
|
|
|
### Diamond
|
|
```json
|
|
{
|
|
"type": "diamond",
|
|
"id": "unique-id",
|
|
"x": 100,
|
|
"y": 100,
|
|
"width": 150,
|
|
"height": 100,
|
|
"strokeColor": "#f59e0b",
|
|
"backgroundColor": "#fef3c7",
|
|
"fillStyle": "solid"
|
|
}
|
|
```
|
|
|
|
### Line
|
|
```json
|
|
{
|
|
"type": "line",
|
|
"id": "unique-id",
|
|
"x": 100,
|
|
"y": 100,
|
|
"points": [[0, 0], [200, 100]],
|
|
"strokeColor": "#374151",
|
|
"strokeWidth": 2
|
|
}
|
|
```
|
|
|
|
## Full JSON Structure
|
|
|
|
```json
|
|
{
|
|
"type": "excalidraw",
|
|
"version": 2,
|
|
"source": "https://excalidraw.com",
|
|
"elements": [
|
|
// Array of elements
|
|
],
|
|
"appState": {
|
|
"gridSize": null,
|
|
"viewBackgroundColor": "#ffffff"
|
|
},
|
|
"files": {}
|
|
}
|
|
```
|
|
|
|
## Font Family Values
|
|
|
|
| Value | Font Name |
|
|
|-------|-----------|
|
|
| 1 | Virgil (hand-drawn) |
|
|
| 2 | Helvetica |
|
|
| 3 | Cascadia |
|
|
| 4 | Assistant |
|
|
| 5 | Excalifont (recommended) |
|
|
|
|
## Fill Styles
|
|
|
|
- `solid` - Solid fill
|
|
- `hachure` - Hatched lines
|
|
- `cross-hatch` - Cross-hatched
|
|
- `dots` - Dotted pattern
|
|
|
|
## Roundness Types
|
|
|
|
- `{ "type": 1 }` - Sharp corners
|
|
- `{ "type": 2 }` - Slight rounding
|
|
- `{ "type": 3 }` - Full rounding (recommended)
|
|
|
|
## Element Binding
|
|
|
|
To connect text to a container:
|
|
|
|
```json
|
|
{
|
|
"type": "rectangle",
|
|
"id": "container-id",
|
|
"boundElements": [{ "id": "text-id", "type": "text" }]
|
|
}
|
|
```
|
|
|
|
```json
|
|
{
|
|
"type": "text",
|
|
"id": "text-id",
|
|
"containerId": "container-id"
|
|
}
|
|
```
|
|
|
|
## Arrow Binding
|
|
|
|
To connect arrows to shapes:
|
|
|
|
```json
|
|
{
|
|
"type": "arrow",
|
|
"startBinding": {
|
|
"elementId": "source-shape-id",
|
|
"focus": 0,
|
|
"gap": 5
|
|
},
|
|
"endBinding": {
|
|
"elementId": "target-shape-id",
|
|
"focus": 0,
|
|
"gap": 5
|
|
}
|
|
}
|
|
```
|