DEV Community

Mark Hopson
Mark Hopson

Posted on

Architecture diagrams for Github README.md?

Does anyone have a recommendation for a tool that can make architecture diagrams (flowcharts) like the one found here?

https://github.com/donnemartin/system-design-primer

Ideally, I would like the diagrams to be hosted somewhere, instead of attaching them to an Issue as described here:

https://stackoverflow.com/questions/14494747/add-images-to-readme-md-on-github

Also, this might be asking a lot, but it would be nice to have these images (preferably SVG) remain editable (similar to a Visio diagram) that I can put Auth in front of (since I would like to use it for my company too).

Does something like this exist?

Top comments (12)

Collapse
 
lbonanomi profile image
lbonanomi •

I might be missing the point, but I've never let that stop me from charging-in before!

Would a simple box-and-arrow model like this work?

This is generated from a much simpler text document with Graphviz's dot command from source like this

You would need to install Graphviz locally, but if you need architecture diagrams I reckon you have the Linux chops to navigate this chore. ;)

Collapse
 
markhopson profile image
Mark Hopson •

I want something more point-and-click tho ... but I agree that Graphviz is pretty cool.

Collapse
 
tonymet profile image
Tony Metzidis •

You're looking for mermaid

Collapse
 
markhopson profile image
Mark Hopson •

Yea I saw that. It's pretty cool but I'd like something a little more point and click though.

Collapse
 
tonymet profile image
Tony Metzidis •

Every time you touch your mouse a kitten dies ;P

Collapse
 
functor profile image
Santana16 • • Edited

Here is the tool I found: sourcespy.com. Help to generate the UML diagrams which can be automatically updated. Pretty cool.

Collapse
 
markhopson profile image
Mark Hopson •

Very cool - and performant too :D

Collapse
 
philipgai profile image
Philip Gai •

You can also use diagrams.net (draw.io) diagrams in your repository. Check it out

Collapse
 
markoa profile image
Marko Anastasov •

You might also consider using an ASCII flow chart generator, such as asciiflow.com.

Collapse
 
markhopson profile image
Mark Hopson •

Yea that's a cool. Same with my comment with "mermaid" - I'd like something a little more point and click.

I know I'm being picky ;)

Collapse
 
markhopson profile image
Mark Hopson •

Draw.io is nice but I don't like how it hosts the diagrams on your Google Drive.

Collapse
 
val_baca profile image
Valentin Baca •

You can keep the files as xml instead.