Interactive Feature Explorer

Experience the full power of TopoKit in a single interactive demo. Switch between 7 layout algorithms, toggle edge bundling and clustering, explore with progressive expand, filter by service type, and customize with 7 built-in themes — all with a real-time cloud architecture visualization.

Features Demonstrated

7 Layout Algorithms 7 Built-in Themes Edge Bundling Clustering Progressive Expand Node Badges 5 Node Shapes Animated Edges Hover Focus Tooltips Context Menu Minimap Search Bar Info Panel Legend Toolbar Filtering Dynamic Node Addition Animated Layout Transitions Drag & Drop Pan & Zoom Multi-Select Overlap Resolution Real-time Updates

Open Full Screen

All Features Active 23 services 29 connections 7 layouts 7 themes

How to Explore

Switch Layouts

Click any layout button in the sidebar to see animated transitions between Force, Hierarchy, Circular, Dagre, Radial, Concentric, and Grid.

Toggle Features

Enable Edge Bundling to reduce clutter, Clustering to group by type, or Progressive Expand to explore from seed nodes outward.

Interact

Hover nodes to see tooltips and focus highlighting. Right-click for context menu actions. Double-click to expand in Progressive Expand mode.

Filter & Search

Use filter chips to focus on specific service types. The search bar finds any service by name instantly.

Change Themes

Switch between 7 built-in themes: Dark, Light, Neon, Ocean, Corporate, Pastel, and Monochrome — each with its own color scheme.

Add & Remove

Click "+ Add Service" to dynamically add new nodes. Right-click any node and choose "Remove Node" to delete it in real-time.

About This Showcase

This showcase demonstrates over 30 TopoKit features working together in a real-world scenario: monitoring a cloud microservices architecture. The graph includes API gateways, backend services, databases, message queues, caches, and monitoring infrastructure — each with distinct shapes, colors, and status badges.

The sidebar provides a Feature Explorer panel where you can toggle every major capability on and off. Layout transitions are smoothly animated, clustering groups services by type into aggregate nodes, and progressive expand lets you explore the architecture starting from key seed nodes.

Every interaction is powered by the SDK's built-in components: the minimap for navigation, toolbar for zoom controls, search bar for finding services, info panel for node details, legend for the color/shape key, tooltip for quick information, and context menu for node-specific actions.

Technical Details

Scenario Cloud microservices architecture with 23 services

Node Shapes Hexagon, Rounded-Rect, Diamond, Circle, Rectangle

Edge Types Bezier (animated), Bezier (static), Step (dashed)

Layouts Force, Hierarchical, Circular, Dagre, Radial, Concentric, Grid

Themes Dark, Light, Neon, Ocean, Corporate, Pastel, Monochrome

Interactions Drag, Pan/Zoom, Select, Hover Focus, Tooltip, Context Menu

Ready to Build Something Like This?

Everything you see in this demo is built with the TopoKit SDK. Get started in minutes with our comprehensive documentation and examples.

Get Started View Pricing

Want a deeper dive into specific features?

The Feature Explorer covers everything at a glance. For step-by-step coverage, jump into the docs or copy-paste a recipe from /examples.

All layouts Edge bundling Clustering Progressive expand All examples

Back to Showcases Next: Stress Test (5K-20K Nodes)