Fast diagramming with cromulent and mermaid?

[edwardanderson]

We were discussing the tooling people might like to use for live-diagramming exemplars on our last call (2020-06-24). I was wondering if an option for simultaneous diagram and data generation might be able to use @azaroth42's crom-to-mermaidjs extension code which renders the class hierarchy diagrams on the website?

I imagine that a nimble Cromulent user could generate house-styled diagrams and Linked Art JSON at the same time... fairly conveniently... by live coding some Python.

It might be that drawing the network charts in OmniGraffle (or other) is the simpler and easier option.

But I could look into it if it feels like tooling which would benefit us?

[azaroth42]

I had thought of that but the cut and pasting of things to get the diagram to generate would be pretty painful... but what about ...

I could imagine a web page with two panes. In one pane, you type in the cromulent code and every time you enter a new line it sends that code to a little web service that runs the code, generates the JSON-LD and mermaid, returns that to the other pane to render.

I could have a go at the backend if someone better with HTML and javascript than I could make the front end look better than a dog's breakfast?

[edwardanderson]

Yes this :+1:

An MVP could be a two pane VSCode session: in one, a Python + crom script creating a static .mmd Mermaid graph; and a second pane visualising it with Mermaid Preview? I'm having a look at it now and there are some hitches: most inconveniently that your cursor needs to be active in the Mermaid file to refresh the diagram. But there might be some mileage in the approach...

[azaroth42]

I have a little webserver that does this ... but can't recall how I fixed the width issue :(

[edwardanderson]

That's pretty! I have a little prompt-toolkit session which:

• gives a multi-line text editing environment on the shell
• highlights the syntax with Pygments
• exec() the user input (umm... yes) on edit to generate a static HTML file
• should do syntax auto-completion

... and a separate Flask app pushing the generated Mermaid graph HTML (with an ugly self-refresh meta tag)

I haven't fixed the width issue. Simply inheriting the magic from text.IndexingPlugin().

[azaroth42]

Fixed it -- css for the line-height was messing things up. SVG assumed 24 and the divs assumed 18.

[azaroth42]

@edwardanderson I pushed my code into a branch code, PR: https://github.com/linked-art/showcase1/pull/21

Give it a try?

[edwardanderson]

I've read your code (but not upskilled my git talents to pull your specific branch), and it's looking very nice! :+1:

Here's almost exactly the same thing (super similar implementation too), but on the terminal with some basic working code completion and syntax highlighting:

I also have some problems deriving from continually running exec() on the same code and mucking up the dynamic UUIDs.

[jpadfield]

Hi, Firstly this looks very cool and I will have to have a go :-)

Also I just wanted to say I have improved the system I was using to generate mermaid based diagrams automatically which I thought may well be related to this discussion. Which might be easier for others to use?

Based again on the modelling example done last week, if you start with a file of simple triples like: https://github.com/jpadfield/cidoc-crm.examples/blob/master/models/tests/test-triples.csv

The system will automatically create the complete model for you: https://jpadfield.github.io/cidoc-crm.examples/models/mermaid_test.html

As shown before it is possible to have additional colours and shapes but this would need more than just the simple triples. (https://jpadfield.github.io/cidoc-crm.examples/models/mermaid_object.html) Has been done for CIDOC but a LInked.Art colour scheme could also be created.

The repository automatically rebuilds the models when ever you commit a new version of your csv files.