How import a diagram into Lucidchart using json import

I’m trying to take advantage of the json import feature to import a diagram into lucidchart. Currently this fails with the following error:

'{"code":"badRequest","message":"Bad or malformed request","requestId":"0d3f44c4704c255b","details":{"error":"Count: 1, message: \'version\' is undefined on object. Available keys are \'id\', \'title\', \'product\', \'pages\', \'data\'","import_error_code":"invalid_file"}}'

I have been able to import using the example files provided in the sample-lucid-rest-applications/standard-imports repo.

My understanding is that json documents can be imported as long as they in a folder and called document.json. I’ve done this, put this into a zip file and tried to submit but with the above error.

Any advice? I’m currently on a mac if that helps.

Page 1 / 1

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.

Thanks for the additional context, Markeen. Do you have a 'version' field defined? If not, please try adding this line to your JSON and let us know if you get any additional errors.

"version": 1,

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": p
      {
        "id": "page1",
        "title": "Account Structure",
        "shapes": h
          {
            "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!

Create an account in the community

Log in to the community

Scanning file for viruses.

This file cannot be downloaded