Frontend Visualization 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.

Diagram-as-Code: Mermaid and Its Ecosystem

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

In 2014, Swedish developer Knut Sveidqvist faced a disaster: his carefully crafted Visio flowchart file was corrupted and wouldn’t open. In desperation, watching his daughter enjoy Disney’s The Little Mermaid, he had an epiphany: what if diagrams could be described in text, managed like code?

That chance idea birthed Mermaid—a tool that describes diagrams in text and auto-generates SVG. Today it boasts 85,000 GitHub stars, natively supported by GitHub, and secured a $7.5M seed round.

Making Graphics Move: Frontend Animation from CSS to WebGL

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

Static charts convey information. Animated charts convey process.

Many people think of “showing off” when they hear animations. But 95% of blog animation needs can be solved with CSS. CSS @keyframes + animation is like a Swiss Army knife — simple, reliable, no extra libraries, and respects user accessibility preferences through prefers-reduced-motion.

But there’s always that 5% where CSS falls short. Multi-element choreography, designer-created complex interactions, 3D data visualization, massive particle rendering. That’s when you need to find another path.