search

projectstorm / react-diagrams

a super simple, no-nonsense diagramming library written in react that just works
https://projectstorm.cloud/react-diagrams
MIT License
8.65k stars 1.17k forks source link

JSON import/export? #909

Open kristopher-wood opened 2 years ago

kristopher-wood commented 2 years ago

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 commented 2 years ago

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

kristopher-wood commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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.