Pixel Art or Enterprise Diagram? #jointjs

本站添加: 2026-05-17

[00:00:00]Would you believe me if I told you that this  is not just a beautiful piece of pixel art, but rather a fully functional, interactive, and  performant diagram created with JointJS? Well, that is true. This is a diagram  that consists of 100,000 cells, of 100,000 diagram elements. I will zoom in so  you can see exactly how is this diagram created.

[00:00:22]It actually consists of 50,000 boxes and  connections between those boxes. So altogether 100,000 diagram elements, 100,000 cells. And  this is really performant because, if you see, as I'm moving around the diagram, as I'm trying to  drag those boxes around, it's all working really nicely. It's performant, fast, and of course  interactive. I'll tell you the secret. We're not actually rendering all 100,000 SVG elements  on the page at all times. We're just rendering parts that are visible. And the beautiful thing  is that when SVG performance drops too much, we're actually replacing SVG with canvas.  Check the related video if you want to learn more about how performant JointJS really is  on massive enterprise diagrams like this one.