Frontend Technology Series

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?

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.

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.

With so many chart libraries out there, Chart.js, ECharts, D3, Highcharts, AntV, Plotly, Recharts, Victory… the first thing to get straight is: they’re fundamentally not substitutes for each other.

Config-driven factories vs parts toolboxes — that’s the essential difference. D3.js is the bottom-up toolbox where you assemble parts yourself. ECharts and Highcharts are config-driven factories where declarative configuration produces charts. Recharts and Victory are React native component libraries with declarative being most natural. Get this positioning difference right, and you’re halfway there.

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.

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.