How to define connections in JSON

Question

Hi, I’m trying to programmatically make some diagrams using the APIs. I’ve seen the GitHub, the API docs, and the other post. How does one define connections in the json? And is it hard-coded or is there a way for a connection to automatically make itself between two boxes? Like I have some rectangles with IDs (“AppA”), is there a way to make a connecting arrow between two different IDs, like I’ve tried to do with the items in the connections list (with startShapeId and endShapeId, it didn’t work). Or is it some hardcoded way where you have to define the beginning and ending x and y coordinates of the arrow like we do for putting down shapes.

Also, is there any way for the shapes and connections, once defined, to auto arrange themselves in a way that minimizes overlapping lines? Like an auto-formatter. Kind of like how Graphviz automatically arranges the diagram in a readable way when using their python module.

This is what I turn into a json file, and then into a zip file, and then renamed to a .lucid file, and passed in the files parameter of the API.

shapes_payload = { "version": 1, "pages": b { "id": "page1", "title": "Main Page", "shapes": " { "id": "AppA", "type": "rectangle", "boundingBox": { "x": 100, "y": 100, "w": 100, "h": 60 }, "style": { "fill": { "type": "color", "color": "#ADD8E6" }, "stroke": { "color": "#000000", "width": 1, "style": "solid" } }, "text": "App A" }, { "id": "AppB", "type": "rectangle", "boundingBox": { "x": 300, "y": 100, "w": 100, "h": 60 }, "style": { "fill": { "type": "color", "color": "#ADD8E6" }, "stroke": { "color": "#000000", "width": 1, "style": "solid" } }, "text": "App B" }, { "id": "AppC", "type": "rectangle", "boundingBox": { "x": 500, "y": 100, "w": 100, "h": 60 }, "style": { "fill": { "type": "color", "color": "#ADD8E6" }, "stroke": { "color": "#000000", "width": 1, "style": "solid" } }, "text": "App C" } ], "connections": � { "id": "conn1", "type": "line", "startShapeId": "AppA", "endShapeId": "AppB", "style": { "stroke": { "color": "#000000", "width": 1, "style": "solid" } } }, { "id": "conn2", "type": "line", "startShapeId": "AppB", "endShapeId": "AppC", "style": { "stroke": { "color": "#000000", "width": 1, "style": "solid" } } } ] } ] }

Page 1 / 1

Hey Goated Intern,

By connections, I’m assuming you mean our lines. You can read about lines here. (Here is an example json) Those documents will answer most of your questions.

I’m not aware of what type of formatting rules apply to our lines. I will look into it.

(After looking into line formatting: the lines routes will roughly match if you manually added them do on the canvas. Which allows overlapping, so will standard import)

Reply

Jeremy Lakey · Answer

Hey Goated Intern,By connections, I’m assuming you mean our lines. You can read about lines here. (Here is an example json) Those documents will answer most of your questions.I’m not aware of what type of formatting rules apply to our lines. I will look into it.(After looking into line formatting: the lines routes will roughly match if you manually added them do on the canvas. Which allows overlapping, so will standard import)

Reply

Create an account in the community

Log in to the community

Scanning file for viruses.

This file cannot be downloaded