Layered Sidebar Map Layout
April 23, 2026 · View on GitHub
Layout: Central layered stack flanked by narrow context rails on one or both sides Best for: Enterprise architecture summaries, platform blueprints with horizontal threads (governance, KPIs, value chain) that need to frame the layered system without cluttering the stack itself
Template
Knowledge Platform Overview
The central stack answers how content flows top to bottom. The rails carry the threads that cut across every layer and usually get lost in a pure layered diagram.
Value Chain
Capture
Curate
Compose
Distribute
Surfaces
Web reader
Editor host
Export bundle
Experience Layer
Reader shellProgressive layout
Authoring paneLive preview
Command surfaceSkill bindings
Export viewPrint · share
Processing Core
Parser pipelineAST · plugins
Render engineThemes · targets
Skill runtimePrompt adapters
Data Layer
Document store
Asset cache
Memory graph
Audit log
External Services (bounded)
Model providers
Search index
Sync endpoints
Cross-Cut Threads
Access policy
Content provenance
Observability
Rate limits
North-Star Signals
Time to first render
Render error rate
Weekly active authors
Variations
- Single rail: drop one side and switch the outer grid to
200px 1fr. Useful when only one family of cross-cut threads matters. - Muted external tier: keep the bottom
mutedlayer dashed to signal "bounded / third-party", so it does not visually compete with owned layers. - Row emphasis: promote one layer with the
coremodifier. Only one layer should carry it — the one that holds the platform's main value.
When Not to Use
- The content is a flat list of capabilities → use
badge-grid. - The system has no clear top-to-bottom flow → use
radial-huborarchitecture-map. - The rails repeat the same items as the stack → drop the rails; the layout is noise without them.