SVG on Mi&Bee Blog

From Mermaid to WebGPU: Four Diagram Mistakes in a Year of Blogging

Tue, 07 Jul 2026 00:00:00 +0000

I’ve been blogging for over a year now, and I’ve drawn dozens of diagrams. Architecture diagrams, sequence diagrams, data comparison bar charts, TCP congestion window evolution curves.

Then one day on my commute home, it hit me: I’ve been using Mermaid almost daily, but I have no idea what technology powers it.

You write a ```mermaid code block, save the file, and there it is—a fully rendered diagram. But how does text become SVG? What even is SVG? Why do I use Chart.js for bar charts and ECharts for stacked line charts? What if I need a real-time dashboard, not just a static diagram?

Frontend Graphics Evolution: From HTML Tables to WebGPU

Wed, 08 Jul 2026 00:00:00 +0000

Before choosing technology, understand the landscape.

Many developers encountering frontend visualization for the first time dive straight into a framework’s documentation, slowly grind through configuration options, and eventually produce a working chart. But months later, when they hit performance bottlenecks or need to support more complex interactions, they realize the tool they chose doesn’t fit their needs.

The evolution of frontend graphics technology follows a very clear trajectory. Understanding this trajectory keeps you from getting lost when selecting tools.

SVG, Canvas, WebGL: Choosing Your Rendering Layer

Wed, 08 Jul 2026 00:00:00 +0000

We covered chart history and tool selection in previous posts. Now let’s go technical: how do you choose between SVG, Canvas, and WebGL rendering layers?

Many developers have a misconception: SVG is slowest, Canvas is medium, WebGL is fastest. Like a transportation hierarchy—bicycle, car, airplane. But this intuition is wrong.

Essential Differences: Three Rendering Modes

Here’s the bottom line: the core difference between these technologies isn’t performance, it’s rendering mode.