Arrow icon
See all demos

Hexagonal Grid

How would you create a hexagonal grid diagram? We used the Honeycomb library to do the math for us, and JointJS, which rendered the grid and the shapes in it and made everything interactive. Check out the result below.
Demo instructions
Create additional elements by clicking on the plus icon, move them to the hexagonal grid and link them using the element connect tool.
Hexagonal Grid

See the Pen JointJS: Hexagonal Grid by JointJS (@jointjs) on CodePen.

Made with JointJS+

Only available with the JointJS+ commercial license in the apps/ directory of your package. Don't have a license yet? Start a trial and use the source code of all our demos for free, with no strings attached, for 30 days.

Made with JointJS

Available in the JointJS open-source library which helps developers create simple visual applications in less time.

Speed up your development with a powerful library

Leverage a time-tested JavaScript diagramming library using the best of HTML5 and SVG to accelerate your development.