Discover Mermaid.js for graphic visualization
Posted on - April 13, 2025 by Andy Cinquin
ViewMermaid.jsChart
Not that long ago, I needed to do quite a bit of job/project hunting, client outreach, communication, and statistical analysis.
In this context, I needed to quickly produce diagrams to have visual aids that would easily and rapidly show what I had done, the results, and why I had done it.
Without further ado, let me introduce you to the amazing tool I discovered.
Something called "Mermaid.js", a graphic visualization library, a kind of GaC (Graphics as Code?), with the idea of generating rather cool diagrams.
There's also an alternative for creating flow chart-like visualizations.
For example, for my job search, I wanted to visualize the responses I received, the response rate, interviews, and job offers.
For instance, it could look like this:
// Node colors
:Applications #4B0082
:No response #A9A9A9
:Still no response #A9A9A9
:Rejection "keep in touch" #FFA07A
:Interested for later #98FB98
:Outright rejection #FF6347
:Follow-up #FF69B4
:Other rejections #FFD700
:Interviews #1E90FF
:HR video interview #1E90FF
:Team video interview #1E90FF
:Job offer #32CD32
:Co-founding discussion #20B2AA
:No match #20B2AA
:CTO offer #32CD32
:Added to Freelance list #9370DB
:Second wave 3 months later #4B0082
:Interested but no projects #98FB98
:No source #A9A9A9
// Flows
Applications [264] No response
Applications [20] Rejection "keep in touch"
Applications [6] Interested for later
Interested for later [2] Added to Freelance list
Applications [5] Outright rejection
Applications [4] Other rejections
Applications [3] Interviews
Applications [20] Co-founding discussion
No response [99] Follow-up
Follow-up [97] Still no response
Follow-up [1] Interviews
Rejection "keep in touch" [11] Added to Freelance list
Interviews [1] HR video interview
HR video interview [1] Team video interview
Team video interview [1] Job offer
HR video interview [2] Job offer
Interviews [2] HR video interview
Interviews [2] Added to Freelance list
Co-founding discussion [14] No match
Co-founding discussion [6] CTO offer
CTO offer [4] Job offer
No source [6] Job offer
Second wave 3 months later [110] No response
Second wave 3 months later [35] Interested but no projects
Interested but no projects [7] Added to Freelance list
Second wave 3 months later [5] Interviews
Interviews [3] Job offer
The idea is to describe each flow manually. It's complicated and time-consuming, but today with AI, it's an easy and visual method. For presenting things, it's absolutely top-notch!
Check out Mermaid.js and SankeyMATIC! They're real game-changers!
🚀 Thanks for reading!
If you enjoyed this article, feel free to share it around.
💡 Got an idea? Let's talk !☕