See your architecture clearly: Major visualizer improvements
I'm excited to share a major update to the EventCatalog visualizer. The visualizer has had a complete refresh with a new layout engine, redesigned nodes, hover highlighting, and dark mode support.
Here's a breakdown of everything that's changed.
New layout engine
The visualizer now uses a completely rebuilt layout engine. Nodes are spaced out better, groups (like domains) are properly sized with headers and padding, and edges route cleanly between nodes. If you've had issues with overlapping nodes or messy layouts, this should fix it.
Redesigned nodes
Every node type has been refreshed. Services, events, commands, queries, channels, data products, actors, and external systems all have cleaner designs with better icon and label spacing. The nodes have a stronger visual hierarchy so it's easier to scan your architecture at a glance.
Hover highlighting
You can now hover over any edge or node to see how things are connected. Hover an edge and the source and target nodes light up. Hover a node and all its connected edges and peer nodes get highlighted. Makes it much easier to trace message flows through large architectures.
Dark mode support
The visualizer now fully supports dark mode. All nodes, edges, the minimap, and the legend panel respect your theme. Switch between light and dark and everything updates.
Message icons replace animated edges
The animated flowing dots on edges have been replaced with a cleaner message icon. Less visual noise, same information. Animations are also paused automatically when you're dragging, panning, or zooming for smoother interaction.
Performance improvements
Node components are now memoized, static props are defined outside components to avoid unnecessary re-renders, and hover highlighting uses direct DOM manipulation instead of React state updates. The result is smooth interaction even with hundreds of nodes.
Getting started
If you're already running EventCatalog, just update to the latest version. All the visualizer improvements apply automatically.
npm install @eventcatalog/core@latest
Questions or feedback? Join us on Discord or open an issue on GitHub.