json format?

[nbao]

Hello.

Can I ask the feature to save the diagram to json format and save onchange data in hidden textarea? If yes, can you guide me with some examples? please

Thanks

[AlexeyBoiko]

Hello @nbao

I recommend you use new version. New version is almost done. New version is in the "dev" branch.

For serialization
There is serialize function in dgrm-serialization.js file.
https://github.com/AlexeyBoiko/DgrmJS/blob/dev/src/diagram/dgrm-serialization.js
Call this function when you need JSON.

Track addition/deletion of shapes
If you need track addition/deletion of shapes on a fly use MutationObserver
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

[nbao]

Oh I think we will have methode OnChange for every move or change text, it will generate un array something like
{
nodeDataArray [ index, categoryOfShape, LocationXY, Text]
linkDataArray [FromIndex,ToIndex, FormPosition(Top|Left|Bottom|Right), ToPosition(Top|Left|Bottom|Right) ]
}

"nodeDataArray": [
{"category":"Comment", "loc":"360 -10", "text":"Kookie Brittle", "key":-13},
{"key":-1, "category":"Start", "loc":"175 0", "text":"Start"},
{"key":0, "category":"Rectangle", "loc":"-5 75", "text":"Preheat oven to 375 F"},
{"key":1, "category":"Circle","loc":"175 100", "text":"In a bowl, blend: 1 cup margarine, 1.5 teaspoon vanilla, 1 teaspoon salt"},
{"key":2, "loc":"175 200", "text":"Gradually beat in 1 cup sugar and 2 cups sifted flour"},
{"key":-2, "category":"End", "loc":"175 660", "text":"Enjoy!"}
],
"linkDataArray": [
{"from":1, "to":2, "fromPort":"B", "toPort":"T"},
{"from":2, "to":3, "fromPort":"B", "toPort":"T"},
]

[AlexeyBoiko]

Thanks for suggestion.

we will have methode OnChange for every move or change text

Do you really need OnChange event? You can get JSON by click on the button.

it will generate un array something like

dgrm.net use this format. It is similar to your suggestion

{
   "v":"1",
   "s":[
      {
         "type":1, // circle
         "position":{ "x":324, "y":468 },
         "title":"Title"
      },
      {
         "type":2, // rect
         "position":{ "x":444, "y":564 },
         "title":"Title",
         "w":96,
         "h":48
      },
      {
         "type":0, // path
         "s":0,
         "sk":"right",
         "e":1,
         "ek":"top"
      }
   ]
}

[nbao]

Hi,
Do you have a table mapping type? now there are 0: path, 1: circle, 2: rect
can we have more shapes something like https://en.wikipedia.org/wiki/Flowchart

• Database
• Document
• Input/Output,
• Manual,
• Preparation,
• User
  Can title support html? (support it is very useful)

[AlexeyBoiko]

Hi

Do you have a table mapping type?

0 - path
1 - circle
2 - rect
3 - text
4 - rhomb

This mapping is in shape-type-map.js

can we have more shapes

I plan to add new shapes after the current tasks.
Roadmap:

• Sequence diagram (working on it right now)
• Text settings: small/big, bold, align
• Copy-past shapes
• Ctrl-Z

Can title support html?

For now this is not planned. Text editor will be very useful. But due to the other of tasks, I will postpone it for now.

[nbao]

Hi,

Do you plan to release 1st version and export to cdn? I search on jsDelivr or unpkg but I can't find your project.
Can I add your project to my drupal module Json Table or Views Organization Chart
definitely all credit goes to you

[AlexeyBoiko]

Hi, I do not plan to create cdn.