160 lines
2.5 KiB
Markdown
160 lines
2.5 KiB
Markdown
# tldraw Record Templates
|
|
|
|
## Required Base Records
|
|
|
|
```json
|
|
{
|
|
"gridSize": 10,
|
|
"name": "",
|
|
"meta": {},
|
|
"id": "document:document",
|
|
"typeName": "document"
|
|
}
|
|
```
|
|
|
|
```json
|
|
{
|
|
"id": "page:page",
|
|
"name": "Page",
|
|
"index": "a1",
|
|
"meta": {},
|
|
"typeName": "page"
|
|
}
|
|
```
|
|
|
|
Every shape should include:
|
|
|
|
```json
|
|
{
|
|
"parentId": "page:page",
|
|
"index": "a2",
|
|
"typeName": "shape"
|
|
}
|
|
```
|
|
|
|
## Rich Text Helper
|
|
|
|
```json
|
|
{
|
|
"type": "doc",
|
|
"content": [
|
|
{
|
|
"type": "paragraph",
|
|
"content": [
|
|
{
|
|
"type": "text",
|
|
"text": "Label"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
```
|
|
|
|
Also include legacy `text` with the same plain text.
|
|
|
|
## Geo Shape
|
|
|
|
Use geo shapes for most boxes.
|
|
|
|
```json
|
|
{
|
|
"x": 100,
|
|
"y": 100,
|
|
"rotation": 0,
|
|
"isLocked": false,
|
|
"opacity": 1,
|
|
"meta": {},
|
|
"id": "shape:box",
|
|
"type": "geo",
|
|
"props": {
|
|
"geo": "rectangle",
|
|
"w": 260,
|
|
"h": 90,
|
|
"color": "blue",
|
|
"labelColor": "black",
|
|
"fill": "solid",
|
|
"dash": "solid",
|
|
"size": "m",
|
|
"font": "sans",
|
|
"align": "middle",
|
|
"verticalAlign": "middle",
|
|
"growY": 0,
|
|
"url": "",
|
|
"scale": 1,
|
|
"richText": {"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"My box"}]}]},
|
|
"text": "My box"
|
|
},
|
|
"parentId": "page:page",
|
|
"index": "a2",
|
|
"typeName": "shape"
|
|
}
|
|
```
|
|
|
|
## Text Shape
|
|
|
|
```json
|
|
{
|
|
"x": 100,
|
|
"y": 40,
|
|
"rotation": 0,
|
|
"isLocked": false,
|
|
"opacity": 1,
|
|
"meta": {},
|
|
"id": "shape:title",
|
|
"type": "text",
|
|
"props": {
|
|
"color": "black",
|
|
"size": "xl",
|
|
"font": "sans",
|
|
"textAlign": "start",
|
|
"autoSize": true,
|
|
"w": 900,
|
|
"scale": 1,
|
|
"richText": {"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Diagram Title"}]}]},
|
|
"text": "Diagram Title"
|
|
},
|
|
"parentId": "page:page",
|
|
"index": "a1",
|
|
"typeName": "shape"
|
|
}
|
|
```
|
|
|
|
## Arrow Shape
|
|
|
|
Arrows require `labelColor`.
|
|
|
|
```json
|
|
{
|
|
"x": 400,
|
|
"y": 200,
|
|
"rotation": 0,
|
|
"isLocked": false,
|
|
"opacity": 1,
|
|
"meta": {},
|
|
"id": "shape:arrow",
|
|
"type": "arrow",
|
|
"props": {
|
|
"kind": "arc",
|
|
"color": "black",
|
|
"labelColor": "black",
|
|
"fill": "none",
|
|
"dash": "solid",
|
|
"size": "m",
|
|
"arrowheadStart": "none",
|
|
"arrowheadEnd": "arrow",
|
|
"bend": 0,
|
|
"start": {"x": 0, "y": 0},
|
|
"end": {"x": 120, "y": 0},
|
|
"labelPosition": 0.5,
|
|
"font": "sans",
|
|
"scale": 1,
|
|
"richText": {"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"label"}]}]},
|
|
"text": "label"
|
|
},
|
|
"parentId": "page:page",
|
|
"index": "a3",
|
|
"typeName": "shape"
|
|
}
|
|
```
|