Flora Case Study
AI
Vibecoded
Flora is a graph-based network topology visualization tool for data center infrastructure
Industry
AI · IT Infrastructure
status
Shipped, in production
Approach
Data visualization, Interaction design
Tools
Figma, Claude Code, React Flow, ELKjs
Year
2026
Design system
IBM Carbon Design system
About the project
Flora is Foliage's tool for turning a data center's raw infrastructure inventory, bare-metal servers, network connections, and their dependencies, into an interactive graph that SRE and DevOps engineers can actually navigate. Before Flora, that same information lived in tables and text-based inventories: technically complete, but nearly impossible to read as a system. You could see every server, but not how they related to each other.
The other challenge
The Brief
Infrastructure at scale is a graph problem, not a list problem. Engineers do not think in rows, they think in connections: what does this server depend on, what breaks if that switch goes down, what is this incident actually touching. The brief was to design a way to represent that graph that stayed legible at real client scale, hundreds of nodes and their connections, without turning into unreadable visual noise.
The Path
The hardest early decision was layout. Hand-placing hundreds of nodes was never going to scale, and a naive force-directed graph tends to produce the kind of tangled "hairball" that looks technical but communicates nothing. I evaluated layout engines against that specific failure mode and landed on ELKjs, which let us apply a hierarchical, layered layout that kept related infrastructure visually grouped instead of scattered.
[IMAGE: before/after or comparison of layout approaches, if available]
On top of that layout, I designed the interaction model around progressive disclosure rather than showing everything at once. An engineer opens on the full topology, an overview with no commitment to any single part of it. Clicking into a node or cluster reveals more specific data about that piece of infrastructure without forcing a full context switch to a different screen. The graph stays the constant; detail layers in and out of it.
[IMAGE: node detail / drill-down state]
Figma file