Show HN: Programmatically Generate Diagrams for GitHub Readmes

[bestouff]

FWIW Gitlab already renders Mermaid natively, and it's totally client-side (done in the browser) which means there's no rendering server to install, no image to host differently is each branch, etc. Cf https://docs.gitlab.com/ee/user/markdown.html#mermaid

[StavrosK]

Wow, thanks for this! I had no idea, this is extremely useful.

[jph]

Great work! Would you be interested in adding capabilities for PlantUML? The syntax is very similar. If so, I'll donate $50 to you or your favorite charity.

Demo diagrams with syntax examples -- see the final one for an example document that I want to render for my team's devops pipeline:

https://github.com/joelparkerhenderson/demo_plantuml/

[rschachte]

Hey there! Not a bad idea. Can you make an issue on the repo?

[alexmercier]

Unfortunately Github doesn't support Mermaid language natively. Meanwhile, I've created an extension (Firefox & Chrome) that adds support for it: https://github.com/BackMarket/github-mermaid-extension

[adamhepner]

I will chip in as a happy user of PlantText[1]. It allows you to edit PlantUML diagrams, renders them, and you can either download them as PNGs, SVG, or ASCII. I'm pretty sure you can also directly link to an image, although I'm not sure about ToS, so don't do it without fact-checking. Oh, and it saves your content locally.

[1]: https://www.planttext.com/.

[jerieljan]

This is nice. Good stuff.

I've always automated my Markdeep[1] documentation's inline PlantUML diagrams with a few scripts here and there (simply looks for .puml files, exports PNG and SVG and hosts everything on a static site), but I've never imagined using a service for supplying the generated output. I want to bounce off this idea somehow.

[1]: https://casual-effects.com/markdeep/

[burtonator]

I did a big heads down on this about 6 months ago as I was writing a paper and needed a ton of sequence diagrams to explain protocols.

PlantUML is a major pain. I didn't know about Mermaid at the time.

Latex has a ton of code for building better charts but they're all very very low level.

What's needed is a higher level abstraction here.

It should be possible to have much higher level charts without having to be a latex god.

[KuhlMensch]

Question: how does the local embed link translate into an asset uploaded to github user content?

https://camo.githubusercontent.com/461a806ab46b5db76dcb02048...

[rschachte]

It would work the same way as imgur or another image hosting provider. The app is in it's beginning phases to show the concept, but I'm adding blob storage on Azure. The image would get interpolated no different than anything else.

[montroser]

That is a clever method for embedding, and I like the minimal syntax.

We've been using Plectica[1] for these sorts of diagrams and finding it to be pretty great. Not sure if they support export to svg out of the box yet though.

[1]: https://plectica.com/welcome/technologists

[rschachte]

Ah, that's a neat tool! I've actually been kind of looking for something like this for work. Thanks for sharing.

[askme2]

Readers may also want to check out nomnoml.com. It’s definitely a more stripped down version of Mermrender. I used it for my thesis paper and was happy enough with it. I’ll definitely be checking this tech out.

[SlowRobotAhead]

Used WSD web sequence diagram at Amazon, handy, never thought it was too much of a pain to snip it out and embed that somewhere; but I get the idea.

[agranig]

mermaid-filter is also a great part in the tool-chain, especially with pandoc.

[rschachte]

Cool!