Solved

Standard API import in Lucid

Forum|Forum|1 year ago
June 30, 2025
7 replies
162 views

I am currently trying out demo.lucid with the standard import feature.

Is it possible to change the direction of the arrows in the images that appeared? I was able to remove the arrows by modifying document.json, but can I freely change the direction of the arrows? I apologize for the inconvenience, but could you please let me know?

Example：Defeat the Elves →Dominate Life、Attack Minas Tirith→Dominate Life

Best answer by Caden E

Hi Shu,

Great question. If you have a line definition that looks something like this:

{
  "id": "line",
  "lineType": "straight",
  "endpoint1": {
    "type": "shapeEndpoint",
    "style": "none",
    "shapeId": "block0",
    "position": { "x": 1, "y": 0.5 }
  },
  "endpoint2": {
    "type": "shapeEndpoint",
    "style": "arrow",
    "shapeId": "block1",
    "position": { "x": 0, "y": 0.5 }
  }
}

you should be able to reverse the direction by just swapping the “style”s -- “none” to “arrow”, and “arrow” to “none”. There are also various examples in the docs which may be useful to you.

P

Paul McC

Lucid Legend Level 4

filthy hobbitses.. i have nothing helpful to add except appreciating the topic of your demo 🤣

C

Caden EAnswer

Lucid product team

Hi Shu,

Great question. If you have a line definition that looks something like this:

{
  "id": "line",
  "lineType": "straight",
  "endpoint1": {
    "type": "shapeEndpoint",
    "style": "none",
    "shapeId": "block0",
    "position": { "x": 1, "y": 0.5 }
  },
  "endpoint2": {
    "type": "shapeEndpoint",
    "style": "arrow",
    "shapeId": "block1",
    "position": { "x": 0, "y": 0.5 }
  }
}

you should be able to reverse the direction by just swapping the “style”s -- “none” to “arrow”, and “arrow” to “none”. There are also various examples in the docs which may be useful to you.

S

shuAuthor

Thank you for your advice.

S

shuAuthor

Thank you for your advice. I was able to successfully change the direction of the arrows.

As for another issue, there are 11 red boxes by default, but can I add more boxes?

I added blocks 12 to 24 in the JSON, but they were not reflected in the results.

C

Caden E

Lucid product team

Could you share the blocks definitions from your `document.json`, or at least some of them? That will make it a lot easier to diagnose.

S

shuAuthor

{
"version": 1,
"collections": [
{
"id": "Fellowship",
"dataSource": "Fellowship - Sheet1.csv"
}
],
"pages": [
{
"id": "mainPlan",
"title": "Main Plan",
"shapes": [
{
"id": "mainTitle",
"type": "rectangle",
"boundingBox": { "x": 20, "y": 40, "w": 900, "h": 80 },
"style": {
"stroke": { "width": 3 }
},
"text": "One Import to Rule Them All"
},
{
"id": "mainImage",
"type": "image",
"boundingBox": { "x": 1640, "y": 39.999999999999936, "w": 80.50697084917624, "h": 80.00000000000007 },
"image": { "type": "ref", "ref": "lucid-lotr.png" },
"stroke": { "width": 3 }
},
{
"id": "swimlane",
"type": "swimLanes",
"boundingBox": { "x": 140, "y": 200, "w": 1390.6666666666665, "h": 960 },
"style": {
"stroke": { "color": "#062327ff", "width": 5 }
},
"magnetize": true,
"vertical": false,
"titleBar": { "height": 40, "verticalText": true },
"lanes": [
{ "title": "Phase One", "width": 320, "headerFill": "#062327ff", "laneFill": "#ffffff" },
{ "title": "Phase Two", "width": 320, "headerFill": "#062327ff", "laneFill": "#ffffff" },
{ "title": "Phase Three", "width": 320, "headerFill": "#062327ff", "laneFill": "#ffffff" }
]
},
{
"id": "block1",
"type": "process",
"boundingBox": { "x": 290, "y": 300, "w": 160, "h": 120 },
"style": {
"stroke": { "color": "#6f2131ff", "width": 3 }
},
"text": "{{=referencekey(1).'Task'}}",
"linkedData": [
{ "collectionId": "Fellowship", "key": "1" }
],
"customData": [
{ "key": "RingScore", "value": "=@\"Rings of Power Obtained\"*@\"Chance of Success\"" }
]
},
{
"id": "block2",
"type": "process",
"boundingBox": { "x": 550, "y": 300, "w": 160, "h": 120 },
"style": {
"stroke": { "color": "#6f2131ff", "width": 3 }
},
"text": "{{=referencekey(1).'Task'}}",
"linkedData": [
{ "collectionId": "Fellowship", "key": "2" }
],
"customData": [
{ "key": "RingScore", "value": "=@\"Rings of Power Obtained\"*@\"Chance of Success\"" }
]
},
{
"id": "block3",
"type": "process",
"boundingBox": { "x": 790, "y": 300, "w": 160, "h": 120 },
"style": {
"stroke": { "color": "#6f2131ff", "width": 3 }
},
"text": "{{=referencekey(1).'Task'}}",
"linkedData": [
{ "collectionId": "Fellowship", "key": "3" }
],
"customData": [
{ "key": "RingScore", "value": "=@\"Rings of Power Obtained\"*@\"Chance of Success\"" }
]
},
{
"id": "block4",
"type": "terminator",
"boundingBox": { "x": 1050, "y": 300, "w": 160, "h": 120 },
"style": {
"stroke": { "color": "#6f2131ff", "width": 3 }
},
"text": "{{=referencekey(1).'Task'}}",
"linkedData": [
{ "collectionId": "Fellowship", "key": "4" }
],
"actions": [
{ "type": "gotoPage", "pageId": "secretPlan" }
],
"customData": [
{ "key": "RingScore", "value": "=@\"Rings of Power Obtained\"*@\"Chance of Success\"" }
]
},
{
"id": "block5",
"type": "process",
"boundingBox": { "x": 290, "y": 620, "w": 160, "h": 120 },
"style": {
"stroke": { "color": "#6f2131ff", "width": 3 }
},
"text": "{{=referencekey(1).'Task'}}",
"linkedData": [
{ "collectionId": "Fellowship", "key": "5" }
],
"customData": [
{ "key": "RingScore", "value": "=@\"Rings of Power Obtained\"*@\"Chance of Success\"" }
]
},
{
"id": "block6",
"type": "process",
"boundingBox": { "x": 550, "y": 620, "w": 160, "h": 120 },
"style": {
"stroke": { "color": "#6f2131ff", "width": 3 }
},
"text": "{{=referencekey(1).'Task'}}",
"linkedData": [
{ "collectionId": "Fellowship", "key": "6" }
],
"customData": [
{ "key": "RingScore", "value": "=@\"Rings of Power Obtained\"*@\"Chance of Success\"" }
]
},
{
"id": "block7",
"type": "process",
"boundingBox": { "x": 790, "y": 620, "w": 160, "h": 120 },
"style": {
"stroke": { "color": "#6f2131ff", "width": 3 }
},
"text": "{{=referencekey(1).'Task'}}",
"linkedData": [
{ "collectionId": "Fellowship", "key": "7" }
],
"actions": [
{ "type": "url", "url": "https://www.youtube.com/watch?v=EApCLbgAE5E", "newWindow": true }
],
"customData": [
{ "key": "RingScore", "value": "=@\"Rings of Power Obtained\"*@\"Chance of Success\"" }
]
},
{
"id": "block8",
"type": "process",
"boundingBox": { "x": 1050, "y": 620, "w": 160, "h": 120 },
"style": {
"stroke": { "color": "#6f2131ff", "width": 3 }
},
"text": "{{=referencekey(1).'Task'}}",
"linkedData": [
{ "collectionId": "Fellowship", "key": "8" }
],
"customData": [
{ "key": "RingScore", "value": "=@\"Rings of Power Obtained\"*@\"Chance of Success\"" }
]
},
{
"id": "block9",
"type": "terminator",
"boundingBox": { "x": 1310, "y": 620, "w": 160, "h": 120 },
"style": {
"stroke": { "color": "#6f2131ff", "width": 3 }
},
"text": "{{=referencekey(1).'Task'}}",
"linkedData": [
{ "collectionId": "Fellowship", "key": "9" }
],
"customData": [
{ "key": "RingScore", "value": "=@\"Rings of Power Obtained\"*@\"Chance of Success\"" }
]
},
{
"id": "block10",
"type": "process",
"boundingBox": { "x": 290, "y": 940, "w": 160, "h": 120 },
"style": {
"stroke": { "color": "#6f2131ff", "width": 3 }
},
"text": "{{=referencekey(1).'Task'}}",
"linkedData": [
{ "collectionId": "Fellowship", "key": "10" }
],
"customData": [
{ "key": "RingScore", "value": "=@\"Rings of Power Obtained\"*@\"Chance of Success\"" }
]
},
{
"id": "block11",
"type": "process",
"boundingBox": { "x": 550, "y": 940, "w": 160, "h": 120 },
"style": {
"stroke": { "color": "#6f2131ff", "width": 3 }
},
"text": "{{=referencekey(1).'Task'}}",
"linkedData": [
{ "collectionId": "Fellowship", "key": "11" }
],
"customData": [
{ "key": "RingScore", "value": "=@\"Rings of Power Obtained\"*@\"Chance of Success\"" }
]
},
{
"id": "block12",
"type": "process",
"boundingBox": { "x": 550, "y": 940, "w": 160, "h": 120 },
"style": {
"stroke": { "color": "#6f2131ff", "width": 3 }
},
"text": "{{=referencekey(1).'Task'}}",
"linkedData": [
{ "collectionId": "Fellowship", "key": "12" }
],
"customData": [
{ "key": "RingScore", "value": "=@\"Rings of Power Obtained\"*@\"Chance of Success\"" }
]
},
{
"id": "block13",
"type": "process",
"boundingBox": { "x": 550, "y": 940, "w": 160, "h": 120 },
"style": {
"stroke": { "color": "#6f2131ff", "width": 3 }
},
"text": "{{=referencekey(1).'Task'}}",
"linkedData": [
{ "collectionId": "Fellowship", "key": "13" }
],
"customData": [
{ "key": "RingScore", "value": "=@\"Rings of Power Obtained\"*@\"Chance of Success\"" }
]
},
{
"id": "block14",
"type": "process",
"boundingBox": { "x": 550, "y": 940, "w": 160, "h": 120 },
"style": {
"stroke": { "color": "#6f2131ff", "width": 3 }
},
"text": "{{=referencekey(1).'Task'}}",
"linkedData": [
{ "collectionId": "Fellowship", "key": "14" }
],
"customData": [
{ "key": "RingScore", "value": "=@\"Rings of Power Obtained\"*@\"Chance of Success\"" }
]
},
{
"id": "block15",
"type": "process",
"boundingBox": { "x": 550, "y": 940, "w": 160, "h": 120 },
"style": {
"stroke": { "color": "#6f2131ff", "width": 3 }
},
"text": "{{=referencekey(1).'Task'}}",
"linkedData": [
{ "collectionId": "Fellowship", "key": "15" }
],
"customData": [
{ "key": "RingScore", "value": "=@\"Rings of Power Obtained\"*@\"Chance of Success\"" }
]
},
{
"id": "block16",
"type": "process",
"boundingBox": { "x": 550, "y": 940, "w": 160, "h": 120 },
"style": {
"stroke": { "color": "#6f2131ff", "width": 3 }
},
"text": "{{=referencekey(1).'Task'}}",
"linkedData": [
{ "collectionId": "Fellowship", "key": "16" }
],
"customData": [
{ "key": "RingScore", "value": "=@\"Rings of Power Obtained\"*@\"Chance of Success\"" }
]
},
{
"id": "block17",
"type": "process",
"boundingBox": { "x": 550, "y": 940, "w": 160, "h": 120 },
"style": {
"stroke": { "color": "#6f2131ff", "width": 3 }
},
"text": "{{=referencekey(1).'Task'}}",
"linkedData": [
{ "collectionId": "Fellowship", "key": "17" }
],
"customData": [
{ "key": "RingScore", "value": "=@\"Rings of Power Obtained\"*@\"Chance of Success\"" }
]
},
{
"id": "block18",
"type": "process",
"boundingBox": { "x": 550, "y": 940, "w": 160, "h": 120 },
"style": {
"stroke": { "color": "#6f2131ff", "width": 3 }
},
"text": "{{=referencekey(1).'Task'}}",
"linkedData": [
{ "collectionId": "Fellowship", "key": "18" }
],
"customData": [
{ "key": "RingScore", "value": "=@\"Rings of Power Obtained\"*@\"Chance of Success\"" }
]
},
{
"id": "block19",
"type": "process",
"boundingBox": { "x": 550, "y": 940, "w": 160, "h": 120 },
"style": {
"stroke": { "color": "#6f2131ff", "width": 3 }
},
"text": "{{=referencekey(1).'Task'}}",
"linkedData": [
{ "collectionId": "Fellowship", "key": "19" }
],
"customData": [
{ "key": "RingScore", "value": "=@\"Rings of Power Obtained\"*@\"Chance of Success\"" }
]
},
{
"id": "block20",
"type": "process",
"boundingBox": { "x": 550, "y": 940, "w": 160, "h": 120 },
"style": {
"stroke": { "color": "#6f2131ff", "width": 3 }
},
"text": "{{=referencekey(1).'Task'}}",
"linkedData": [
{ "collectionId": "Fellowship", "key": "20" }
],
"customData": [
{ "key": "RingScore", "value": "=@\"Rings of Power Obtained\"*@\"Chance of Success\"" }
]
},
{
"id": "block21",
"type": "process",
"boundingBox": { "x": 550, "y": 940, "w": 160, "h": 120 },
"style": {
"stroke": { "color": "#6f2131ff", "width": 3 }
},
"text": "{{=referencekey(1).'Task'}}",
"linkedData": [
{ "collectionId": "Fellowship", "key": "21" }
],
"customData": [
{ "key": "RingScore", "value": "=@\"Rings of Power Obtained\"*@\"Chance of Success\"" }
]
},
{
"id": "block23",
"type": "process",
"boundingBox": { "x": 550, "y": 940, "w": 160, "h": 120 },
"style": {
"stroke": { "color": "#6f2131ff", "width": 3 }
},
"text": "{{=referencekey(1).'Task'}}",
"linkedData": [
{ "collectionId": "Fellowship", "key": "23" }
],
"customData": [
{ "key": "RingScore", "value": "=@\"Rings of Power Obtained\"*@\"Chance of Success\"" }
]
},
{
"id": "block24",
"type": "process",
"boundingBox": { "x": 550, "y": 940, "w": 160, "h": 120 },
"style": {
"stroke": { "color": "#6f2131ff", "width": 3 }
},
"text": "{{=referencekey(1).'Task'}}",
"linkedData": [
{ "collectionId": "Fellowship", "key": "24" }
],
"customData": [
{ "key": "RingScore", "value": "=@\"Rings of Power Obtained\"*@\"Chance of Success\"" }
]
},
{
"id": "showButton",
"type": "terminator",
"boundingBox": { "x": 1560.5069708491762, "y": 200, "w": 160, "h": 80 },
"style": {
"fill": { "type": "color", "color": "#c6263bff" },
"stroke": { "width": 3 }
},
"text": "Show Notes",
"actions": [
{ "type": "showLayer", "layers": ["notesLayer"] }
]
},
{
"id": "note1",
"type": "stickyNote",
"boundingBox": { "x": 860, "y": 200, "w": 165, "h": 119.99999999999997 },
"text": "Can anyone tell me wtf is a \"Baggins\""
},
{
"id": "note2",
"type": "stickyNote",
"boundingBox": { "x": 1440, "y": 500, "w": 190, "h": 148.99999999999997 },
"text": "Are we sure we want to try to defeat Gandalf?"
},
{
"id": "note3",
"type": "stickyNote",
"boundingBox": { "x": 680, "y": 1000, "w": 200, "h": 140 },
"text": "But what do we want for 2nd bfast? Is meat back on the menu?"
},
{
"id": "hideButton",
"type": "terminator",
"boundingBox": { "x": 1560.5069708491762, "y": 200, "w": 160, "h": 80 },
"style": {
"fill": { "type": "color", "color": "#c6263bff" },
"stroke": { "width": 3 }
},
"text": "Hide Notes",
"actions": [
{ "type": "hideLayer", "layers": ["notesLayer"] }
]
}
],
"lines": [
{
"id": "line1-5",
"lineType": "elbow",
"stroke":{ "color": "#c6263bff", "width": 3 },
"endpoint1":{ "type":"shapeEndpoint","style":"none","shapeId":"block1","position":{"x":1,"y":0.5}},
"endpoint2":{ "type":"shapeEndpoint","style":"arrow","shapeId":"block5","position":{"x":0,"y":0.5} }
},
{
"id": "line5-10",
"lineType": "elbow",
"stroke":{ "color": "#c6263bff", "width": 3 },
"endpoint1":{ "type":"shapeEndpoint","style":"none","shapeId":"block5","position":{"x":1,"y":0.5}},
"endpoint2":{ "type":"shapeEndpoint","style":"arrow","shapeId":"block10","position":{"x":0,"y":0.5} }
},
{
"id": "line2-6",
"lineType": "elbow",
"stroke":{ "color": "#c6263bff", "width": 3 },
"endpoint1":{ "type":"shapeEndpoint","style":"none","shapeId":"block2","position":{"x":1,"y":0.5}},
"endpoint2":{ "type":"shapeEndpoint","style":"arrow","shapeId":"block6","position":{"x":0,"y":0.5} }
},
{
"id": "line6-11",
"lineType": "elbow",
"stroke":{ "color": "#c6263bff", "width": 3 },
"endpoint1":{ "type":"shapeEndpoint","style":"none","shapeId":"block6","position":{"x":0.5,"y":1}},
"endpoint2":{ "type":"shapeEndpoint","style":"arrow","shapeId":"block11","position":{"x":0.5,"y":0} }
},
{
"id": "line3-7",
"lineType": "elbow",
"stroke":{ "color": "#c6263bff", "width": 3 },
"endpoint1":{ "type":"shapeEndpoint","style":"none","shapeId":"block3","position":{"x":1,"y":0.5}},
"endpoint2":{ "type":"shapeEndpoint","style":"arrow","shapeId":"block7","position":{"x":0,"y":0.5} }
},
{
"id": "line4-8",
"lineType": "elbow",
"stroke":{ "color": "#c6263bff", "width": 3 },
"endpoint1":{ "type":"shapeEndpoint","style":"none","shapeId":"block4","position":{"x":1,"y":0.5}},
"endpoint2":{ "type":"shapeEndpoint","style":"arrow","shapeId":"block8","position":{"x":0,"y":0.5} }
}
],
"layers": [
{ "id": "notesLayer", "title": "Notes", "items": ["note1", "note2", "note3", "hideButton"] }
]
}
]
}

C

Caden E

Lucid product team

Blocks 12-24 all have the same x and y values in the `boundingBox` property as Block 11, so they’re all stacked in the same place. If you change the coordinates to spread them out they should become visible.

Create an account in the community

Log in to the community