Okay, so I wanted to make a cool chart for my blog post today. I’ve heard about this thing called Mermaid, which lets you create diagrams and charts using simple text-based code. Sounds neat, right?
First, I needed to get the code. I’ve been playing around with Claude AI, so I figured I’d ask it to generate some Mermaid code for me. I just gave it a prompt describing the chart I wanted – a simple flowchart showing a process.
Claude did a great job and generated something quickly！Got the Mermaid code, which looked something like this:
mermaid
graph TD
A[Start] –> B{Decision};
B –>Yes C[Result 1];
B –>No D[Result 2];
C –> E[End];
D –> E[End];
It’s like plain and simple, just text. Next up, to see the diagrams, I needed to run this code. I copied the code. Then I needed a way to actually see this code as a chart. I remembered that some Markdown editors have Mermaid support built-in. I use Typora, but I needed to see it now. I’m sure there’s plenty of options, but I found one after quick searching and checking.
I pasted my code into the live editor, and BAM! My chart appeared, It’s truly rewarding!
It was exactly what I asked Claude for! I could even tweak the code in the editor, and the chart would update instantly. Super convenient!
I am so excited about the result I have. I will use this cool function from now on!