How import a diagram into Lucidchart using json import

Hello Markeen,

It looks like the formatting of your document.json file is incorrect. That message is returned when the json parser fails. Below is a simple bpmn flow that you can use to check against yours:

{
  "title": "diagram (14)",
  "version": 1,
  "pages": [
    {
      "id": "page1",
      "title": "diagram (14)",
      "shapes": [
        {
          "id": "StartEvent_1y45yut",
          "text": "hunger noticed",
          "boundingBox": {
            "x": 152,
            "y": 102,
            "w": 36,
            "h": 36
          },
          "style": {

          },
          "type": "bpmnEvent",
          "eventGroup": "start",
          "throwing": false,
          "nonInterrupting": false,
          "eventType": "none"
        },
        {
          "id": "Task_1hcentk",
          "text": "choose recipe",
          "boundingBox": {
            "x": 240,
            "y": 80,
            "w": 100,
            "h": 80
          },
          "style": {

          },
          "type": "bpmnActivity",
          "activityType": "task",
          "taskType": "none"
        },
        {
          "id": "ExclusiveGateway_15hu1pt",
          "text": "desired dish?",
          "boundingBox": {
            "x": 395,
            "y": 95,
            "w": 50,
            "h": 50
          },
          "style": {

          },
          "type": "bpmnGateway",
          "gatewayType": "exclusive"
        }
      ],
      "lines": [
        {
          "id": "SequenceFlow_0h21x7r",
          "lineType": "elbow",
          "endpoint1": {
            "type": "shapeEndpoint",
            "style": "none",
            "shapeId": "StartEvent_1y45yut",
            "position": {
              "x": 1,
              "y": 0.5
            }
          },
          "endpoint2": {
            "type": "shapeEndpoint",
            "style": "arrow",
            "shapeId": "Task_1hcentk",
            "position": {
              "x": 0,
              "y": 0.5
            }
          }
        },
        {
          "id": "SequenceFlow_0wnb4ke",
          "lineType": "elbow",
          "endpoint1": {
            "type": "shapeEndpoint",
            "style": "none",
            "shapeId": "Task_1hcentk",
            "position": {
              "x": 1,
              "y": 0.5
            }
          },
          "endpoint2": {
            "type": "shapeEndpoint",
            "style": "arrow",
            "shapeId": "ExclusiveGateway_15hu1pt",
            "position": {
              "x": 0,
              "y": 0.5
            }
          }
        }
      ],
      "groups": [],
      "layers": []
    }
  ]
}

Using the menu, how do I import JSON that will become a new document

Hi ​@scaleWorks, happy to help! If you're looking to import JSON into Lucidchart via API, you’ll want to use our Standard JSON Import.

This involves making a POST request to our import document endpoint with a properly structured .lucid zip file (which includes a document.json). You can find the full details and file format requirements in our developer documentation here: https://developer.lucid.co/docs/overview-si

Just to clarify, this approach uses our API (not the in-app import menu.) Let us know if you have any questions! We’re happy to help.

HI ​@Michael B . Thanks for the response. 

Is it possible to be pointed out where my formatting is wrong?

I’d attach it here, but it looks like it might be too long. 

The diagram I am trying to import is an export. I did a get document contents to generate my json and removed the id/parent fields from it before upload. 

That was it ​@vscala . Thanks!

Though it did import, it didn’t import any shapes. Is there a way to do this?

My feeling was that I could use the https://lucid.readme.io/reference/getdocumentcontent to get the json content of diagrams that do exist. 

Without editing the document beyond removing the id, I wanted to check that an import would work. That’s working now, but the documents have no shapes. 

Is there a way to get that shape data? 

The json from the export doesn’t seem to include it. 

{
                        "id": "n60CFnGo5ujW",
                        "class": "AWSCloudaltAWS19_v2",
                        "contains": {
                            "shapes": [],
                            "lines": [],
                            "groups": []
                        },
                        "textAreas": [
                            {
                                "label": "Title",
                                "text": "Production"
                            }
                        ],
                        "customData": [],
                        "linkedData": []
                    }

That was it ​@vscala . Thanks!

 

Though it did import, it didn’t import any shapes. Is there a way to do this?

 

My feeling was that I could use the https://lucid.readme.io/reference/getdocumentcontent to get the json content of diagrams that do exist. 

 

Without editing the document beyond removing the id, I wanted to check that an import would work. That’s working now, but the documents have no shapes. 

 

 

 

Is there a way to get that shape data? 

 

The json from the export doesn’t seem to include it. 

{
                        "id": "n60CFnGo5ujW",
                        "class": "AWSCloudaltAWS19_v2",
                        "contains": {
                            "shapes": [],
                            "lines": [],
                            "groups": []
                        },
                        "textAreas": [
                            {
                                "label": "Title",
                                "text": "Production"
                            }
                        ],
                        "customData": [],
                        "linkedData": []
                    }

 

Unfortunately, the get document content endpoint doesn't support returning shapes or styling and only provides relational data. You'll need to add your own shape data. You can find our documentation on shapes here: https://lucid.readme.io/docs/shapes-si

That is disappointing as it would make creating these diagrams via json much easier. 

I’m trying to create one now. Is it possible to use custom shapes? I have access to Azure/AWS and more library of shapes. Can i use these in my json? 

Also I’m having problems getting the text and fill settings to do what I want. 

The below code keeps creating the non-CF OU groups, when I would prefer them all to look that way. I’ve manually updated the CF OU for what I want, post import. 

{
    "title": "AWS Foundation diagrams",
    "product": "lucidchart",
    "version": 1,
    "pages": [
      {
        "id": "page1",
        "title": "Account Structure",
        "shapes": [
          {
            "id": "block1",
            "type": "rectangle",
            "boundingBox": {
              "x": 16,
              "y": 309,
              "w": 320,
              "h": 1100
            },
            "text": "<p style=\"font-size: 8pt;text-align: center;vertical-align: text-top;color: #5A6C86\">CF OU</p>",
            "style": {
                "stroke": {
                    "color": "#5A6C86",
                    "width": 4.0,
                    "style": "dashed"
                },
                "fill": {
                    "type": "color",
                    "color": "#00000000"
                },
                "rounding": 0
            }
          },
          {
            "id": "block2",
            "type": "rectangle",
            "boundingBox": {
              "x": 395,
              "y": 309,
              "w": 680,
              "h": 1100
            },
            "text": "<p style=\"font-size: 8pt;text-align: center;vertical-align: text-top;color: #5A6C86\">Core OU</p>",
            "style": {
                "stroke": {
                    "color": "#5A6C86",
                    "width": 4.0,
                    "style": "dashed"
                },
                "fill": {
                    "type": "color",
                    "color": "#00000000"
                },
                "rounding": 0
            }
          },
          {
            "id": "block3",
            "type": "rectangle",
            "boundingBox": {
              "x": 1135,
              "y": 309,
              "w": 320,
              "h": 1100
            },
            "text": "<p style=\"font-size: 8pt;text-align: center;vertical-align: text-top;color: #5A6C86\">Non-Core OU</p>",
            "style": {
                "stroke": {
                    "color": "#5A6C86",
                    "width": 4.0,
                    "style": "dashed"
                },
                "fill": {
                    "type": "color",
                    "color": "#00000000"
                },
                "rounding": 0
            }
          },
          {
            "id": "block4",
            "type": "rectangle",
            "boundingBox": {
              "x": 1515,
              "y": 309,
              "w": 320,
              "h": 525
            },
            "text": "<p style=\"font-size: 8pt;text-align: center;vertical-align: text-top;color: #5A6C86\">Playground OU</p>",
            "style": {
                "stroke": {
                    "color": "#5A6C86",
                    "width": 4.0,
                    "style": "dashed"
                },
                "fill": {
                    "type": "color",
                    "color": "#00000000"
                },
                "rounding": 0
            }
          },
          {
            "id": "block5",
            "type": "rectangle",
            "boundingBox": {
              "x": 1515,
              "y": 877,
              "w": 320,
              "h": 525
            },
            "text": "<p style=\"font-size: 8pt;text-align: center;vertical-align: text-top;color: #5A6C86\">Quarantine OU</p>",
            "style": {
                "stroke": {
                    "color": "#5A6C86",
                    "width": 4.0,
                    "style": "dashed"
                },
                "fill": {
                    "type": "color",
                    "color": "#00000000"
                },
                "rounding": 0
            }
          }
        ]
      }
    ]
}

Hello ​@Richard Udell , you mentioned an in-app import menu for json files; can you tell me where to find that please? I can’t seem to find it.

Hey ​@Paul281! Happy to clarify, and my apologies if my wording was confusing before.

I mentioned the in-app menu to highlight that JSON import is only available via our API. You won't find a button for it within Lucidchart itself.

The closest in-app alternative would be our CSV import for Process Diagrams. You can find the guide for that in our Help Center if you're interested.

Hope this helps!