Architecture diagrams for Github README.md?

github logo ・1 min read

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?

twitter logo DISCUSS (12)
markdown guide
 

I use draw.io. You can save it as an SVG and it'll remain editable when you open with the editor. Plus, it'll be easier to embed and view it with other editing tools.

 

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

 
 

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. ;)

 

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

 

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

 
 
 

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

 

Every time you touch your mouse a kitten dies ;P

 

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

 

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 ;)

Classic DEV Post from Apr 3

Workspace Wednesday: Show off your desk/computer setup!

Let’s share pics of everybody’s setups. Feel free to add details about your ha...

Mark Hopson profile image
Join dev.to

Be a better developer. Free forever.