Mermaid: Draw marmaid flowchart from JSON

[tscislo-lingaro]

Hello,

This is more a question then an issue.
We would like to have some sort of json representation of a mermaid flowchart that we can download from a server. Is there any parser form JSON -> mermaid mardown? Maybe people do this differently?

Thanks!

[tylerlong]

We would like to have some sort of json representation of a mermaid flowchart that we can download from a server.

Does it have to be JSON? Can you download plain text which is mermaid markdown?

[tscislo]

@tylerlong
Yes I could download mermaid markdown from the server. However editing mermaid markdown string either on the server or on client is problematic (it has to be regexp based), it would be much easier to have a json representation which is easy to edit on both sides and then transform it to mermaid markdown. Any tools to do that?

[tylerlong]

I am not aware of such a tool.

Why do you think JSON is easier to edit than markdown? Because JSON has linter?

You can check the syntax of mermaid markdown like this on client side: https://github.com/tylingsoft/markdown-it-mermaid/blob/master/src/index.js#L5-L14 So you can give user live feedback if he/she makes a mistake.

Not a direct solution. Just my 2 cents for your reference.

[tscislo]

Thanks @tylerlong !

I'm NOT trying to create a parser for marmaid markdown. My aim is to have multiple flowcharts on a page and the user should be able to edit ONLY the names of particular elements. For example in such flowchart:

graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[Car]

I'd like to easily change the name of C which is currently 'Let me think' and send it to the server. It will be done in a UI by a modal with a text box. In markdown it can be done only via string regexp find and replace which is not optimal. Any better way for this?

[tylerlong]

I've got your point. What you said is like "reverse editing". User could edit part of the rendered chart to update mermaid code. It is true that markdown is not friendly to end users (compared to a modal with a text box).

I don't think there is any solution at the moment. I am not the creator of mermaid. I am just a collaborator. Recently I have been thinking: mermaid's syntax is very concise and short. But it's not as expressive as json and xml. For example if I use xml to define a chart, I can add as many information as I want to the XML node attributes. I could add an ID, so when user update the text, I can update the xml tag by ID

Just some random thoughts. If we want to make this happen. It might lead to a new product other than mermaid.

[rafaduka]

My use with mermaid is to build diagrams for web systems. Today, I had give up it because does not have support parse from json format. I'm looking for a way to build flowchart reading by json, this way I can put it [ids, edges, label, etc]. Although I think mermaid is awesome project.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.