I was recently working on graph algorithms, and it gave me the opportunity to explore Mermaid, which is a tool for adding graphs and charts to your markdown.
DEV.to doesn't currently have support for Mermaid, however you can use Mermaid.live to generate charts as .png or .svg to use wherever you want. GitHub does support Mermaid, so you can immediately level-up your README.md's with dependency graphs and sequence diagrams very easily!
Making a sequence diagram
documentation for sequence diagrams
Let's start with an example of a sequence diagram for a HTTP request.
sequenceDiagram
User->>+Client: Enters a URL...
Client->>+Server: Sends a HTTP GET request
Server-->>-Client: Returns a HTTP response
Client-->>-User: Senses are filled with delight
If I write this code in my README, this will be rendered by Mermaid like this:
Displaying data in a Pie Chart
Who doesn't want to display the makeup of bee species in the UK in the form of a pie chart?!
Here's my code:
pie title Classification of Bee Species Groups in the United Kingdom
"Colletidae" : 2000
"Andrenidae" : 2700
"Halictidae" : 3500
"Melittidae" : 160
"Megachilidae" : 3000
"Apidae" : 6000
MVC pattern with state diagram
documentation for state diagrams
stateDiagram-v2
View --> Model
Model --> View
Model --> Controller
Controller --> Model
Describe a process with a flow chat
I cannot say how many iterations of the peer review process I have drawn in my lifetime, but it is a lot. One more won't hurt!
Heres the code:
flowchart TD
A[Manuscript submitted] --> B(Editorial Review)
B -.-|Revisions| A
B --- C([Peer Review])
C --> D{Reviewer 1}
C --> E{Reviewer 2}
C --> F{Reviewer 3}
D -.-|Revisions| A
E -.-|Revisions| A
F -.-|Revisions| A
D -->|OK| G(Editorial Decision)
E -->|OK| G(Editorial Decision)
F -->|OK| G(Editorial Decision)
G -->|Accept| H>PUBLISH]
G -->|Reject| I[\fa:fa-trash-alt/]
and the output looks like this:
Top comments (3)
Hey, nice post! Do you know if dev.to supports these ones in the markdown?
Last I checked dev.to doesn't support mermaid.
I generated the images with mermaid and saved them as .png to use in the blogpost
Got it! Thanks.