Skip to content

Commit 8e2b030

Browse files
authored
Merge pull request #2270 from jimthompson5802/iss-2263-widgets-docify-doc-update
feat(docs) Add material on widgets and docify to the CALM documentation web site.
2 parents 8ce29e8 + 8fa8c55 commit 8e2b030

5 files changed

Lines changed: 171 additions & 0 deletions

File tree

docs/docs/core-concepts/index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,5 +18,6 @@ Explore each concept below:
1818
- [Timelines](timelines): Track how your architecture evolves over time through significant moments.
1919
- [Decorators](decorators): Attach supplementary information like deployments, security context, and business metadata to architecture elements.
2020
- [Metadata](metadata): Learn how to enrich your architecture with additional information.
21+
- [Widgets](widgets): Learn how to generate Markdown documentation from your architecture models using reusable template components.
2122

2223
Continue through each section to get detailed explanations, examples, and best practices.

docs/docs/core-concepts/widgets.md

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
---
2+
id: widgets
3+
title: Widgets
4+
sidebar_position: 10
5+
---
6+
7+
# Widgets in CALM
8+
9+
Widgets are reusable, template-driven components that transform CALM architecture data into human-readable documentation. Built on Handlebars, the CALM Widgets framework lets you generate Markdown documentation — including tables, lists, and Mermaid diagrams — directly from your architecture models.
10+
11+
## What is a Widget?
12+
13+
A widget is a self-contained rendering component that accepts a CALM architecture context (or a portion of it), applies an optional set of parameters, and produces formatted Markdown output. Widgets are registered as Handlebars helpers, so you invoke them directly inside documentation templates using the familiar `{{widget-name context options}}` syntax.
14+
15+
The framework ships with a set of built-in widgets covering the most common documentation needs. You can also create custom widgets by implementing the `CalmWidget` interface.
16+
17+
### Key Built-in Widgets
18+
19+
- **table**: Renders any data as a Markdown table. Supports horizontal and vertical layouts, column filtering, nested object expansion, and CALM-specific `sections` (`overview`, `extended`, `metadata`) for displaying node properties in a structured way.
20+
- **list**: Renders arrays as ordered or unordered Markdown lists, with the ability to extract a specific property from objects in the array.
21+
- **json-viewer**: Outputs data as a formatted JSON code block, useful for displaying raw configuration or contract details.
22+
- **flow-sequence**: Converts a CALM flow (a sequence of ordered transitions) into a Mermaid sequence diagram, making it easy to visualise how nodes interact over time.
23+
- **related-nodes**: Renders a Mermaid graph diagram showing all relationships involving a specific node, or the detail of a single relationship. Supports `connects`, `interacts`, `composed-of`, and `deployed-in` relationship types.
24+
- **block-architecture**: Renders a full system architecture as a Mermaid flowchart, with support for containers (systems), interfaces, flow-focused slices, node-type shapes, themes, and clickable links.
25+
26+
### Example of Widget Usage
27+
28+
The following template uses two widgets to document a node: the `table` widget displays the node's core properties in a vertical layout, and the `block-architecture` widget renders the surrounding architecture as a diagram.
29+
30+
```handlebars
31+
## {{nodes["payment-service"].name}}
32+
33+
### Overview
34+
{{table nodes["payment-service"] orientation="vertical" sections="overview"}}
35+
36+
### Architecture
37+
{{block-architecture this focus-nodes="payment-service" highlight-nodes="payment-service"}}
38+
```
39+
40+
When rendered against a CALM architecture, this produces a Markdown table of the node's `unique-id`, `name`, `description`, and `node-type`, followed by a Mermaid flowchart scoped to the payment service and its immediate connections.
41+
42+
### Using Widgets Effectively
43+
44+
Widgets are most effective when they are used alongside CALM architecture models to produce living documentation:
45+
46+
- **Scope diagrams**: Use `focus-nodes`, `focus-flows`, or `focus-relationships` options on the `block-architecture` widget to generate scoped diagrams for specific sections of your documentation, rather than rendering the full architecture every time.
47+
- **Surface metadata**: Use `table` with `sections="metadata"` alongside an `empty-message` to gracefully handle nodes that may or may not carry metadata, keeping documentation clean regardless of input completeness.
48+
- **Visualise flows**: Use `flow-sequence` to generate sequence diagrams from CALM flow definitions, making the ordered interactions between nodes explicit and auditable.
49+
- See the [Widgets README file](https://github.com/finos/architecture-as-code/blob/main/calm-widgets/README.md) for details on the parameters available for each built-in widget.
Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
---
2+
id: docify
3+
title: Docify
4+
sidebar_position: 8
5+
---
6+
7+
# Docify
8+
9+
The `docify` command transforms a CALM architecture JSON file into human-readable documentation. It supports two primary output modes:
10+
11+
- **Website generation** — uses the built-in template bundle to produce a fully structured Markdown documentation site ready to publish with a static site generator.
12+
- **Custom Markdown reports** — uses your own Handlebars (`.hbs`) or Markdown (`.md`) templates to render bespoke reports, conformance summaries, runbooks, or any other document format you need.
13+
14+
In both modes, `docify` processes your architecture model through a set of templates and writes the resulting files to an output directory. Template rendering is powered by [CALM Widgets](../core-concepts/widgets) — a Handlebars-based component system that provides built-in helpers for tables, lists, Mermaid diagrams, and more. You can use these widgets directly inside your own templates to produce rich, structured output from your architecture data.
15+
16+
## Basic Usage
17+
18+
### Generate a documentation website
19+
20+
To generate a documentation website using the built-in template bundle, provide the path to your architecture file and the directory where the output should be written:
21+
22+
```shell
23+
calm docify -a architecture.json -o docs/output
24+
```
25+
26+
This uses the default website template bundle and produces a fully structured Markdown documentation site in `docs/output`.
27+
28+
### Generate a custom Markdown report
29+
30+
To produce a tailored document — such as a compliance report or runbook — supply your own template:
31+
32+
```shell
33+
calm docify -a architecture.json -o reports/ -t my-report-template.hbs
34+
```
35+
36+
Or point to a directory of templates to generate multiple output files in one pass:
37+
38+
```shell
39+
calm docify -a architecture.json -o reports/ -d my-templates/
40+
```
41+
42+
## Command Options
43+
44+
- **`-a, --architecture <file>`**: _(required)_ Path to the CALM architecture JSON file.
45+
- **`-o, --output <file>`**: _(required)_ Path to the output directory where the generated documentation will be written.
46+
- **`--clear-output-directory`**: Clear the output directory before processing (default: false).
47+
- **`-t, --template <path>`**: Path to a single `.hbs` or `.md` template file to use instead of the built-in bundle.
48+
- **`-d, --template-dir <path>`**: Path to a directory of `.hbs`/`.md` templates to use instead of the built-in bundle.
49+
- **`-u, --url-to-local-file-mapping <path>`**: Path to a JSON file that maps URLs to local file paths (see [URL Mapping](#url-to-local-file-mapping) below).
50+
- **`--scaffold`**: Copy the built-in template files into the output directory without processing them. Use this to obtain a starting point for customisation or for live-reload workflows.
51+
- **`-v, --verbose`**: Enable verbose logging.
52+
53+
Only one of `--template` or `--template-dir` may be specified. If neither is provided, the built-in website bundle is used.
54+
55+
## Examples
56+
57+
### Generate a documentation website with the built-in bundle
58+
59+
```shell
60+
calm docify -a my-architecture.json -o docs/output
61+
```
62+
63+
Processes `my-architecture.json` using the default template bundle and writes a ready-to-publish documentation site to `docs/output`.
64+
65+
### Generate a custom Markdown report from a single template
66+
67+
```shell
68+
calm docify -a my-architecture.json -o reports/ -t templates/compliance-report.hbs
69+
```
70+
71+
Renders the architecture against a single Handlebars template, producing a focused report (e.g. a compliance summary or runbook) in `reports/`.
72+
73+
### Generate multiple documents from a template directory
74+
75+
```shell
76+
calm docify -a my-architecture.json -o reports/ -d my-templates/
77+
```
78+
79+
Every `.hbs` and `.md` file found in `my-templates/` is rendered against the architecture and the results are written to `reports/`. This is useful when you need several different views of the same architecture — for example, a technical overview, a controls checklist, and a deployment guide — all generated in one command.
80+
81+
### Scaffold the built-in templates for customisation
82+
83+
```shell
84+
calm docify -a my-architecture.json -o docs/output --scaffold
85+
```
86+
87+
The built-in template files are copied to `docs/output` without being processed. You can then edit them and re-run `docify` with `-d docs/output` to render your customised templates.
88+
89+
### Clear the output directory before regenerating
90+
91+
```shell
92+
calm docify -a my-architecture.json -o docs/output --clear-output-directory
93+
```
94+
95+
Removes all existing files from `docs/output` before writing the new documentation, ensuring no stale files remain.
96+
97+
## URL to Local File Mapping
98+
99+
When your architecture references schemas or patterns via canonical URLs (e.g., `https://example.com/standards/node-standard.json`) but the actual files exist on your local filesystem, the `-u, --url-to-local-file-mapping` option lets you redirect those URLs to local paths.
100+
101+
### Mapping File Format
102+
103+
Create a JSON file that maps URLs to relative file paths:
104+
105+
```json
106+
{
107+
"https://example.com/standards/node-standard.json": "standards/node-standard.json",
108+
"https://example.com/standards/relationship-standard.json": "standards/relationship-standard.json"
109+
}
110+
```
111+
112+
Paths are resolved relative to the mapping file's location.
113+
114+
### Example Usage
115+
116+
```shell
117+
calm docify -a architecture.json -o docs/output -u url-mapping.json
118+
```

docs/docs/working-with-calm/index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ Explore the topics below to get hands-on experience with CALM:
1515
- [Generate](generate): Discover how to generate architectural architectures from predefined patterns.
1616
- [Validate](validate): Learn how to validate your architecture against CALM patterns to ensure compliance.
1717
- [Validation Server](validation-server): Run a standalone HTTP server for remote CALM architecture validation.
18+
- [Docify](docify): Generate a documentation website from your CALM architecture model.
1819
- [CALM AI Tools](calm-ai-tools): Expands the support of additional AI Assistants in CALM architecture modeling.
1920
- [Voice Mode](voice-mode): Enable hands-free interaction with CALM Copilot Chat using voice commands.
2021

docs/sidebars.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ const sidebars = {
4040
'core-concepts/decorators',
4141
'core-concepts/metadata',
4242
'core-concepts/patterns',
43+
'core-concepts/widgets'
4344
],
4445
},
4546
{
@@ -51,6 +52,7 @@ const sidebars = {
5152
'working-with-calm/using-the-cli',
5253
'working-with-calm/generate',
5354
'working-with-calm/validate',
55+
'working-with-calm/docify',
5456
'working-with-calm/validation-server',
5557
'working-with-calm/calm-ai-tools',
5658
'working-with-calm/voice-mode'

0 commit comments

Comments
 (0)