JSON import/export?

[kristopher-wood]

Hello!

Is it possible to import/export diagrams from/to JSON? I'd like to be able to load/save diagrams from/to a database but I can't find any documentation on this.

Thanks! Kris

[Tohin666]

Try serialize/deserialize: https://github.com/projectstorm/react-diagrams/blob/master/diagrams-demo-gallery/demos/demo-serializing/index.tsx

[kristopher-wood]

Hello Tohin,

I did try that, thanks. I get the following error though:

Error: Accessing non-existent addons channel

This is when calling the serialize action, which in turn calls:

import { action } from '@storybook/addon-actions';

I checked and there is indeed no addon exported for "action". Any ideas how to resolve this?

[kristopher-wood]

I fixed it. The answer is on the Storybooks FAQ:

https://storybook.js.org/docs/react/workflows/faq#why-is-there-no-addons-channel

I've got it loading the initial chart from the JSON string output of the previous serialize, but the button doesn't seem to do anything in the example. In any event I think I can work with this from here. :)

[KrishnaPG]

Is there a way to build the json output without having to create the nodes?

The goal is to be able to generate the json file on server (node.js backend) from some data, and then be able to load that file into the front-end by users for customization, editing etc.

The example code linked above uses JSON.stringify(model.serialize()); which requires constructing a model with all nodes first and then serialize it. Not an ideal scenario in backend systems.

It would be great if there is a specific json-schema or some kind of reference storage model that any system can use to generate the model file directly without having to use the runtime to create the nodes.