<p><a href="https://mermaid.js.org/" target="_blank" rel="noopener nofollow">Mermaid.js</a> is a powerful tool to visualize flows, architectures, and data — directly from plain text. But did you know you can animate arrows and apply custom styles to make your diagrams easier to read and much better looking?</p>
<p>Here’s how to do it:</p>
<hr>
<h2>🎯 1. Animate Arrows to Show Flow</h2>
<p>You can animate arrows in Mermaid by giving them an ID and using the animation syntax.</p>
<pre><code class="language-mermaid">flowchart TD
  A[&quot;Client&quot;] r1@--&gt;|Request| B[&quot;Ingress&quot;]
  r1@{ animate: true, animation: slow }
</code></pre>
<h3>✨ Result:</h3>
<ul>
<li>The arrow from Client to Ingress will animate slowly.</li>
<li>Use animation: fast if you want quicker motion.</li>
</ul>
<hr>
<h2>🎨 2. Style Your Nodes with Color</h2>
<p>Plain nodes work, but styled nodes make diagrams easier to scan at a glance. Here’s how:</p>
<pre><code class="language-mermaid">flowchart TD
  A[&quot;Client&quot;]
  B[&quot;Service&quot;]
  C[&quot;Pod&quot;]

  A --&gt; B --&gt; C

  style A fill:#fcd34d,stroke:none
  style B fill:#bfdbfe,stroke:none
  style C fill:#bbf7d0,stroke:none
</code></pre>
<h3>💡 Tips:</h3>
<ul>
<li><code>fill: sets</code> background color.</li>
<li><code>stroke:none</code> removes borders.</li>
<li>Use soft/pastel colors (<code>Tailwind palette</code> is a good <a href="https://uicolors.app/" target="_blank" rel="noopener nofollow">reference</a>).</li>
</ul>
<hr>
<h2>🧩 3. Combine It All: Animations + Styles</h2>
<p><img src="https://media.daily.dev/image/upload/s--Fs9x6TU4--/f_auto/v1744303792/ugc/content_76c80383-1cdb-4a6d-8033-3d4ab4abdc94" alt="example-animation"></p>


Exploring advanced technology in platforms, DevOps, Kubernetes, IaC, open-source AI tools, and more. Innovation and collaboration.

Platform & AI

Mermaid.js is a tool for visualizing flows and data using plain text. This guide covers how to animate arrows to show flow, style nodes with color for better readability, and combine these techniques for more engaging diagrams.

✨ How to Create Animated and Beautiful Mermaid Diagrams