Programmatic source

[matthewmaier]

I love that dgrm files are saved as .png so they work as a preview and as a source! That's amazingly clever. I'm curious if there's any way to make the source programmatic so that you can connect it to code/text. For example, https://mermaid.live/ draws diagrams from a human readable text file and someone even threw together a GUI editor for Mermaid https://www.mermaidflow.app/editor Is that possible with dgrm?

[AlexeyBoiko]

Hi @matthewmaier
Thanks for reaching out.

DGRM use json.

dgrm.json

To view JSON of the diagram: copy and past to text editor.
Foe exmaple: for this diagram

you will get this json

web text/dgrm{"v":"1.2","s":{"8a1e0050":{"id":"8a1e0050","type":1,"position":{"x":732,"y":444},"title":"Title","r":48,"styles":[]}}}

You can copy this text and past to dgrm.net. -> diagram will be drawn.

If you really want to make a diagram generator, then I will add the ability to open json files.

[matthewmaier]

Oh, it's in json anyway. Nice. Have you heard of the Open Canvas Working Group? https://github.com/ocwg/.github They just started up. https://x.com/OrionReedOne/status/1768292314802201087?s=20

So the json is just pasted in at the end of the png? I tried opening the png in notepad++, editing a title, and saving it again. But Dgrm wouldn't load it. I'm not sure how to get a text editor to save it back in png format. Probably need a script. text-compare.com said the before and after are identical except for the edit.

[AlexeyBoiko]

Hi @matthewmaier

So the json is just pasted in at the end of the png?

Yes. But not at the end. PNG format has "chunks". Chunk - is a block of file with extra data, for example date, place, author. You can add to png file your "chunk". It is not a hack, it is png standard.
Article how I add chunk with json to png file
https://medium.com/codex/javascript-diagram-editor-that-renders-diagrams-from-png-images-open-source-d1de0f053088

But Dgrm wouldn't load it.

PNG format specify a field with chunk length. When you change chunk content you have to set up new length.


What is your goal? You want to create dgrm compatible files programmatically? For fun?

Thank you for sharing links.

[matthewmaier]

Oh, okay, that's awesome. You aren't even technically hacking png, just making maximum use of an existing feature.
Gotcha. Chunk length has to match.
Well, now that we have AI assisted coding I've been restarting a defunct project https://www.loom.com/share/6efae0512e0446d19d8f6f065dadc9f2?sid=03be40d2-de74-4065-8eac-294f82e9c050 I saved graphs in plain text json too, but in text files. And I didn't have a way to cleanly manage the difference between the source and the rendered image. You solved that challenge.
Can you set the visible image to whatever you want? Like, could you make the png a picture of a cat but when it's loaded into dgrm it turns into a whole set of instructions on how to take care of your pet cat?
Can you put more than one image into a png? Like, could you have a main image, and then stuff other images that were embedded in the canvas into the same file? That would solve the need to distribute a folder/zip instead of a single file.
I guess it's not technically perfect since the file extension has to stay .png for compatibility but then there's nothing to distinguish it from a normal .png. Maybe a standard could be to put a little icon in the corner of the image Still, that's a huge issue solved. And the Open Canvas Working Group should consider it.

[AlexeyBoiko]

you make the png a picture of a cat but when it's loaded into dgrm it turns into a whole set of instructions on how to take care of your pet cat

Interesting idea.

Yes we can put into png any data we want. Note: some programs cutout not standard png chunks. For example you cannot put png with custom chunk into clipboard in browser. Browsers sanitize clipboard images - remove not standard chunks.