MokuGraph
An interactive force directed graph component for Framer.
Price
$9 USD
Current version
Released
Category
Data Visualisation, Framer Marketplace
Single use license. D3 ships bundled, nothing else to install.
MokuGraph is an interactive force directed graph component for Framer, built to visualise real AI product architectures.
MokuGraph visualises AI product architectures as living, draggable graphs. It ships with 12 templates modelled on real production systems, and everything is bundled, so nothing extra gets installed.
Agent orchestration, RAG pipelines, multi agent teams and MCP systems, modelled on how these systems are actually built in production. Copy the JSON for any template as a starting point, or paste your own architecture data straight into the property panel.
Ambient mode runs the force simulation with hover highlighting, suited to hero sections and animated backgrounds. Interactive mode adds a detail drawer: title, description, tags and related nodes, each of them clickable, so visitors explore an architecture without leaving the graph.
Over thirty controls cover colour mode, physics, node size, labels, drawer width and side, and fonts. Reshape the component entirely without opening the code. D3 ships bundled, so nothing extra gets installed.
On desktop the drawer slides in from the side. On mobile it becomes a bottom sheet. Breakpoint detection happens inside the component, with no configuration from you.
The homepage hero runs MokuGraph in interactive mode, mapping the studio's own disciplines and capabilities. Click any node and you are using the component.
An auto-generated table of contents sits beside every doc as a quiet reading rail, tracking the current section as readers move through the page.
Every doc lives in one filterable index, organised by category and driven entirely by the CMS. New pages appear the moment they are published.
Terms open as definitions in place, so readers never leave the page to understand a concept. The glossary is a CMS collection like everything else.
Readers save pages as they go and pick up where they left off, straight from the header on any page.
A selection becomes a saved passage with a note attached, ready to find again from the highlights icon in the header.
All content lives in native Framer CMS. Docs, changelog and glossary are collections in the same project, behind one publish button.