vault backup: 2026-04-13 17:46:47
This commit is contained in:
@@ -0,0 +1,201 @@
|
||||
# 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
|
||||
}
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user