Re: [PLUG] Free SVG IT/network architecture images?

[JP Vossen via plug <plug@lists.phillylinux.org>]

On 5/24/22 15:58, Keith via plug wrote:
> On 5/24/22 14:40, JP Vossen via plug wrote:
> Will C, showed me a webby, programmy kind of thingy for doing diagrams (really flowcharts) a couple of months ago called Mermaid (https://mermaid.live).  Draw.io looks like it has much more going on so it probably wouldn't work for your needs.  I don't like doing diagrams either but I'm ok with it at this point since its been infrequent.  I completely understand wanting to do it programmatically- dammit Jim, I'm an engineer, not an artist.  I find most drawing tools get in the way of how my brain works.  For whatever reason, Dia seemed to be the one that got in my way the least.  The thing that took me the longest to do with Dia was finding the right way to export a drawing so when I pulled it into Lyx, it looked good.  Once that was solved I was good.

Yeah, I am comparing and contrasting Mermaid and Graphviz.  They both do the same thing more-or-less the same way, but there are lots of little differences.  I'm compiling a list and plan a preso at some point.

At a high level, Mermaid is JavaScript (~2017 IIRC) that tries to have Markdown syntax.  It works and since it's JS there's all kinds of new webby hotness.  But as soon as you want *any* control whatsoever over the output, it devolves into hacking CSS into the middle of Markdown-ish...stuff.  It gets REALLY ugly, REALLY fast.

Graphviz was written 30+ years ago [1] at AT&T, and the detailed but incredibly dry and hard to use docs make me think it was was some by academics in a way back room.  The code is only slightly harder than Mermaid to write, and it doesn't get any harder when you want to exert a bit of control.  I also like the output better.  I guess that puts me more on the 80's academic than flashy web side, but that should surprise no one.  :-)

Mermaid has a bunch of supported native graphs, including a really cool Git demo one.  Graphviz has directed graphs and...not-directed graphs.  Graphviz has a bunch more output formats, language bindings, and tools, since it's been around a long time.  Mermaid is JS so you throw an include into an HTML page and there it is.

This is all actually a really interesting study of re-inventing the wheel 30 years apart.  And as far as I have noticed, neither tool even admits the other tool exists.

And while the docs of Mermaid seem far more approachable than those for Graphviz [2], and there are way more docs and way more current examples...I personally found that I had to go google "<tool> <thing>" for pretty much anything I wanted to do in either of them.  But maybe that's just me.

Go play in webby live editors (hint, JS is required for any of them to work):
Live Editor: https://mermaid-js.github.io/mermaid-live-editor/
* Graphviz Live editors:
	* http://viz-js.com/
	* http://magjac.com/graphviz-visual-editor/
	* https://dreampuf.github.io/GraphvizOnline/

But since I'm paranoid [3], I hate leaking data into web services like that.  If you use Graphviz and install `xdot` then run that in a local GUI next to your editor window, you get instant preview at code save-time.

OK, I'm going to shut up before I give the whole presentation away before I even write it.  :-)

Later,
JP

[1] There are older tools with the same idea, like Kernigan's Pic https://en.wikipedia.org/wiki/Pic_language.  I guess us nerds REALLY don't like manually drawing pictures!  :-)

[2] Mermaid also has a book, _The Official Guide to Mermaid.js_
* By Knut Sveidqvist [Mermaid author], Ashish Jain
* PUBLISHED BY: Packt Publishing
* PUBLICATION DATE: September 2021
* PRINT LENGTH: 492 pages

[3] Side note for one particular list member...see the 43 page "Editing Pictures with lefty" http://graphviz.org/pdf/leftyguide.pdf, and no I'm not making that up.

--  -------------------------------------------------------------------
JP Vossen, CISSP | http://www.jpsdomain.org/ | http://bashcookbook.com/
___________________________________________________________________________
Philadelphia Linux Users Group         --        http://www.phillylinux.org
Announcements - http://lists.phillylinux.org/mailman/listinfo/plug-announce
General Discussion  --   http://lists.phillylinux.org/mailman/listinfo/plug