ByteByteGo Newsletter

Share this post
Diagram as Code
blog.bytebytego.com

Diagram as Code

6 different ways to turn code into beautiful architecture diagrams

Alex Xu
Jul 25
57
4
Share this post
Diagram as Code
blog.bytebytego.com

1. Diagrams

Turn python code into cloud system architecture diagrams

Link: https://github.com/mingrammer/diagrams

Thanks for reading ByteByteGo Newsletter! Subscribe for free to receive new posts and support my work.

2. Mermaid

Generation of diagram and flowchart from text in a similar manner as markdown

Link: https://github.com/mermaid-js/mermaid

Example:

3. ASCII editor

Free editor:

https://asciiflow.com/#/

Free:

https://dot-to-ascii.ggerganov.com/

Paid editor:

https://monodraw.helftone.com/

4. PlantUML

It is an open source tool allowing users to create diagrams from a plain text language. 

Link: https://github.com/plantuml/plantuml

Source code for the diagram: https://raw.githubusercontent.com/bmpi-dev/bmpi.dev/master/content/dev/guide-to-serverless/arch_aws.plantuml

Thanks for reading ByteByteGo Newsletter! Subscribe for free to receive new posts and support my work.

5. Markmap

Visualize your Markdown as mindmaps. It supports the VS code plugin.

Link: https://markmap.js.org/rep

6. Go diagrams

Create beautiful system diagrams with Go

Link: https://github.com/blushft/go-diagrams

Thanks for reading ByteByteGo Newsletter! Subscribe for free to receive new posts and support my work.

4
Share this post
Diagram as Code
blog.bytebytego.com
4 Comments

Create your profile

0 subscriptions will be displayed on your profile (edit)

Skip for now

Only paid subscribers can comment on this post

Already a paid subscriber? Sign in

Check your email

For your security, we need to re-authenticate you.

Click the link we sent to , or click here to sign in.

Manuranga Perera
Jul 28

Another addition : https://dreampuf.github.io/GraphvizOnline/

This is similar to above dot-to-ascii.ggerganov.com, but this generates png/svg

Also check out our project https://ballerina.io/

We generate diagrams from the code and vice versa.

Expand full comment
ReplyCollapse
Mark Meeus
Jul 31

Great writeup! I am developing a solution of my own, scratching my own itch. A simple api to create box-and-arrow types of diagrams, with animation. It is still in a very early alpha stage, and still largely undocumented: https://boxtales.io

Expand full comment
ReplyCollapse
2 more comments…
TopNewCommunity

No posts

Ready for more?

© 2022 ByteByteGo
Privacy ∙ Terms ∙ Collection notice
Publish on Substack Get the app
Substack is the home for great writing