Visualisation Blocks
Six D3-powered spatial layouts that arrange infographic media into interactive visual patterns: Knowledge Hub (radial star), Comparison Lens (side-by-side columns), Orbit Rings (concentric circles), Hexagonal Cluster (honeycomb grid), Flow Tree (hierarchical branches), and Story Arc (vertical zigzag with animated S-curves). Each layout renders responsive, animated diagrams directly in documentation pages.
Architecture documentation should do more than describe relationships in text. Visualisation blocks arrange infographic media into spatial layouts that communicate structure, hierarchy, and relationships at a glance. Each of the six layout types uses a different arrangement pattern suited to particular kinds of information. You add infographic media files as nodes, configure their sizes and positions, and the layout engine handles the rest: responsive sizing, animated connection paths, and smooth rendering across devices.
1. Knowledge Hub
The Knowledge Hub arranges nodes in a radial star pattern. The first node sits at the centre, and all subsequent nodes distribute as satellites around it. Animated SVG paths connect each satellite to the centre. Use this layout to show a central concept with related topics radiating outward: a core technology surrounded by capabilities, a central team surrounded by responsibilities, or a platform with its connected services.
2. Comparison Lens
The Comparison Lens divides nodes into two columns with connecting lines between paired items. Each node has a column assignment (left or right) and a label. Column headings describe what each side represents. Use this layout for before/after comparisons, feature comparisons between two approaches, or contrasting current state versus target state.
3. Orbit Rings
The Orbit Rings layout arranges nodes on concentric rings around a centre point. Each node has a ring property: 0 places it at the centre, higher values place it on progressively larger rings. Use this layout for layers of responsibility, abstraction levels, or proximity to a core concept. A security model with critical assets at the centre and outer defences on further rings. An application architecture with core domain at the centre and infrastructure on outer rings.
4. Hexagonal Cluster
The Hexagonal Cluster arranges nodes in a honeycomb grid pattern. A columns property (default 3) controls how many hexagons appear per row. Nodes fill left to right, top to bottom. Use this layout for equally weighted collections: a technology landscape, a set of capabilities, team members, or product components with no inherent hierarchy.
5. Flow Tree
The Flow Tree arranges nodes in a hierarchical branching tree with labels beside each node. Each node has a parentId (for tree hierarchy) and a label (for descriptive text). Nodes with an empty parentId are roots. Use this layout for decision trees, workflow processes that fork and merge, or any structure that combines flow with branching.
6. Story Arc
The Story Arc arranges nodes in a vertical zigzag chain connected by animated S-curve paths. Nodes alternate left and right using D3 force simulation, creating a flowing narrative from top to bottom. Use this layout for sequential processes, timelines, migration phases, or any story that unfolds step by step.
Common Properties
All six layouts share a common set of section-level and node-level properties.
A complete visual design system built into NeoArc Studio. 90+ shapes across 7 categories, 38 interactive data visualisation shapes with configurator panels, a layers panel with z-order and visibility control, shape grouping and rotation, 11 visual effects with 16 blend modes, gradient fills, a reusable component library, and 5 canvas presets from 16:9 widescreen to 300 DPI print resolution.
Over 100 specialised content blocks across 13 categories, designed specifically for architecture documentation. Decision blocks, risk registers, requirements matrices, testing frameworks, operational runbooks, planning tools, reference tables, and integration documentation, each with purpose-built structure and professional styling that renders identically in web and PDF output.
NeoArc Studio produces architecture documentation that looks as good as enterprise websites. Animated diagrams, scroll-driven presentations, a full infographic design system, professional PDF publishing, static website generation, 100+ styled content blocks, six D3 visualisation layouts, and complete theme customisation, all from the same source content.