repository·main·Indexed 25 days ago
https://github.com/obsidianmd/jsoncanvasAn open file format for infinite canvas data using the .canvas extension. It provides a standardized way for digital whiteboard applications to store, import, and export spatial information via a JSON structure consisting of nodes (text, file, link, group) and edges.
.canvas extension and are designed to be easily parsed by any application.Use these tools to transform canvas data between JSON Canvas and other specialized formats.
Developers can use various language-specific libraries to parse, manipulate, or render JSON Canvas data.
Nodes are objects placed in the nodes array. All nodes must include these generic attributes:
id (required, string): A unique identifier.type (required, string): One of text, file, link, or group.x (required, integer): X position in pixels.y (required, integer): Y position in pixels.width (required, integer): Width in pixels.height (required, integer): Height in pixels.color (optional, canvasColor): Color identifier.text (required, string): Plain text with Markdown syntax.file (required, string): Path to the file/attachment.subpath (optional, string): A subpath starting with # (e.g., #heading-name).url (required, string): The target URL.label (optional, string): Text label for the group.background (optional, string): Path to a background image.backgroundStyle (optional, string): Rendering style. Valid values: cover, ratio, or repeat.A JSON Canvas file is a JSON object containing two optional top-level arrays:
nodes: An array of objects representing elements on the canvas.edges: An array of objects representing connections between nodes.Nodes are ordered by z-index: the first node in the array is at the bottom, and the last node is on top.
Edges are objects in the edges array that connect nodes. Required attributes:
id (required, string): A unique identifier.fromNode (required, string): The id of the starting node.toNode (required, string): The id of the ending node.Optional attributes:
fromSide / toSide: The side where the edge connects. Valid values: top, right, bottom, left.fromEnd: Shape of the start endpoint. Valid values: none, arrow (defaults to none).toEnd: Shape of the end endpoint. Valid values: none, arrow (defaults to arrow).color (optional, canvasColor): Color identifier.label (optional, string): A text label for the edge.The following applications support JSON Canvas. Use this list to determine if an app can natively store, import, or export JSON Canvas files.
| Name | Storage | Import | Export |
|---|---|---|---|
| Obsidian | ✓ | ✓ | ✓ |
| Kinopio | ✓ | ✓ | |
| Flowchart Fun | ✓ | ✓ | |
| hi-canvas | ✓ | ✓ | |
| OrgPad | ✓ | ✓ | |
| Charkoal | ✓ | ✓ | ✓ |
| Ideaflip | ✓ | ✓ |
| Name | Storage | Import | Export |
| ----------------------------------------------- | :-----: | :----: | :----: |
| [Obsidian](https://obsidian.md/) | ✓ | ✓ | ✓ |
| [Kinopio](https://kinopio.club/) | | ✓ | ✓ |
| [Flowchart Fun](https://flowchart.fun/) | | ✓ | ✓ |
| [hi-canvas](https://hi-canvas.marknoteapp.com/) | | ✓ | ✓ |
| [OrgPad](https://orgpad.info/) | | ✓ | ✓ |
| [Charkoal](https://charkoal.dev/) | ✓ | ✓ | ✓ |
| [Ideaflip](https://ideaflip.com/) | | ✓ | ✓ |The canvasColor type is a string used to specify colors for nodes and edges. You can use hex codes or one of six preset numeric strings:
"#FF0000""1": red"2": orange"3": yellow"4": green"5": cyan"6": purple