Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

Any word on supporting diagrams inside GitHub flavored markdown?


I've started using draw.io [1] for diagrams I want to embed in markdown files. The cool feature about draw.io is that it can embed the data structure describing the diagram in a png file. So you get a PNG file that is both source code for your diagram (so you can edit it later), as well as the presentation (you can embed png files and they will render fine in Github hosted md files).

Then I use the markdown-images package [2] for Sublime Text, and I can see those png images in my markdown files in the editor as well.

Benefits of this approach:

* Powerful diagram editor, free to use.

* Editable diagram and embedable image in one file.

* Diagrams rendered in text editor.

[1] https://github.com/jgraph/drawio-desktop

[2] https://packagecontrol.io/packages/Markdown%20Images


The method I've considered: add a separate .mermaid file, render it as a png or svg file, and put that in the markdown file.


Looks like there is an open feature request on GitHub for supporting Mermaid charts: https://github.community/t/feature-request-support-mermaid-m...


You could publish "html" that is actually http://casual-effects.com/markdeep/


I tend to prefer diagrams as code, so yoi can just embed an image that be updated, version controlled, etc, instead of ascii diagrams. Any reason in particular you want ascii instead of images?


Can you describe what 'diagrams as code' mean?

I don't mind images, just wondering if Github would make it easier to generate those. Something like the syntax of web-sequence/uml but not limited to data-flows and something more simpler, ideally.


There are a few tools for creating diagrams with text, Asciiflow and Monodraw probably being the most popular.

* http://asciiflow.com/

* https://monodraw.helftone.com/

From my experience, you don't want to add anything too complicated or anything that's volatile to code, but in some cases a high level overview of how bits of an application fit together can be handy. These days it might be a better idea to just embed or reference a PlantUML diagram instead.

* https://plantuml.com/


pure text is easy to work with most of the time, in fact ascii diagram is used heaviyl in RFCs


I always just use ASCII art in code blocks.


Same here, simple works. I use this tool to help http://asciiflow.com/




Consider applying for YC's Summer 2026 batch! Applications are open till May 4

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: