DEV Community

Simon Foster
Simon Foster

Posted on • Originally published at funkysi1701.com on

2 2

Diagrams with Mermaid

I have been wanting to produce a diagram of the architecture of my side project for some time, but I have put it off as never sure what the correct tools is for this job.

Mermaid is a tool that lets you create diagrams from code and text. I first came across this tool about a year ago for use in a project. I had forgotten about this tool until the other day, when I was thinking about this problem again.

Is it possible to embed a mermaid diagram in the markdown used in a github repo? Well the answer is yes, so lets look at how that works.

A simple mermaid diagram looks like this:

graph TD;
    A[fff]--->B;
    A--->C;
    B--->D;
    C--->D;

Enter fullscreen mode Exit fullscreen mode

which renders like this:

Lets look at what it is doing.

TD means the chart is top down.

A is the name of a node in the chart, [fff] is a label being applied to it.

Then we just define the relationships between the different nodes, you can have <—, —> or —, or even

<—>

Lets look at my architecture. I have a database (cosmosDB), I have a website running on Azure Static Web Apps, I have some Azure functions for getting data into and out of my database. I also have Application Insights monitoring the whole thing. I also have a console app for doing some data import stuff. This produces a diagram like this:

The code to produce this and display it on my github repo is simply

graph TD
A[Azure Static Web App]---B[Http Fn]
B---D[Database]
C[Timer Fn]---D
D---E[Import Console App]
F[App Insights]---A
F---B
F---C

Pretty nice for a few lines of code to show what system talks with what.

There are improvements that can be made to the diagram, for example changing the shapes of the different services.

eg

What diagrams are you going to build?

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more