EXPERIMENTAL FEEDBACK REQUEST - CALM architecture explorer #1846
Description
Experiment Feature Feedback
The CALM maintainers seek your feedback on an experimental feature or module, detailed below.
Please add constructive positive or negative feedback as comments to this issue.
Description of Feature:
Interactive web-based visualization and exploration of FINOS CALM (Common Architecture Language Model) architecture diagrams.
Key Features
- Interactive Graph Visualisation: Auto-layouted architecture diagrams using ReactFlow and Dagre
- JSON Editor: Built-in Monaco editor with syntax highlighting and validation
- Risk Visualisation: Colour-coded risk levels, risk/mitigation badges, and governance control annotations
- Node Details Panel: Detailed view of node properties, interfaces, risks, and mitigations
- Control Governance: Display of controls and governance annotations on nodes and edges
- File Import/Export: Upload and download CALM JSON files
- Responsive Layout: Resizable panels for optimal workspace management
Feedback Timeline:
- Publicised at Monthly Working Group Meeting on: 25 Nov 2025 Architecture as Code - Working Group Meeting - Tuesday 25th November 2025 #1847
- Publicised at Weekly Office Hours on: 3 Nov 2025 Office Hours 2025-11-03 #1768
- Announced on Architecture as Code Mailing List on: [Date]
- Feedback Period Ends on: 25 Feb 2026
- Accepted as non-experimental / Removed from codebase on: [Date]
Target Project:
https://github.com/finos/architecture-as-code/tree/main/experimental/calm-explorer
User Stories:
- As an architect I want a way to visualize and explore a CALM architecture
- As an risk analyst I want to show or review the non-functional controls associated with the architecture.
Feedback Emphasis:
- How this could be integrated into CalmHub (or should it)
Current Limitations:
- Current UI capability of CalmHub has a limited feature set and visualization.
Implementation Details:
- ✅ Added calm-explorer to npm workspaces in root package.json
Technology Stack
- React 18 with TypeScript
- Vite for build tooling and dev server
- ReactFlow for graph visualisation
- Dagre for automatic graph layout
- Monaco Editor for JSON editing
- Tailwind CSS and shadcn/ui component library
- Vitest for testing (50 passing tests)
Additional Context:
...add any other context, diagrams, mockups, or screenshots about the feature here...