Renderizr

Renderizr — a Structurizr workspace as one shareable file

This skill renders a Structurizr workspace — its views, documentation and decision log — into a browsable static site, or into a single self-contained HTML file that can be uploaded as a Claude artifact and opened by anyone, with no server and no network.

Diagrams are drawn by Structurizr's own renderer rather than re-implemented, so they pan, zoom and play back dynamic views exactly as they do in Structurizr.

When to use this skill

• The user wants to see an architecture model rather than read its source.
• The user wants to share a model with people who have no Structurizr account, no server and no copy of the DSL.
• The user asks for an artifact, a preview, or "publish the diagrams".
• The user is working in a repository that has an ./architecture folder — often one created by Scaffoldizr — and wants output from it.

Do not use this skill to author or edit a model. Renderizr renders; it does not parse DSL and never writes to the workspace. Editing the model is Scaffoldizr's job.

The one command

npx github:FormulaMonks/renderizr <workspace.json|url> --single-file --out <dir>

That writes two files into <dir>:

Both inline every stylesheet, script, font, icon and the workspace itself. Neither makes a single network request.

For a Claude artifact, use artifact.html. Handing over index.html instead produces a document nested inside a document.

Drop --single-file to get a directory — index.html plus assets/ — for hosting on a static server or GitHub Pages.

Getting a workspace to render

Renderizr takes JSON, either a local path or a URL. It does not parse DSL.

• A workspace.json already on disk — usually ./architecture/workspace.json. Use it directly.

• Only a workspace.dsl — export it first with structurizr-cli, which exports a DSL workspace to JSON. In a Scaffoldizr repository, ./architecture/scripts/export.sh (or export.ps1) does this for you.

• A URL — passed straight through, e.g. the Big Bank plc example:

  npx github:FormulaMonks/renderizr \
    https://raw.githubusercontent.com/structurizr/ui/main/examples/big-bank-plc.json \
    --single-file --out /tmp/big-bank
  

workspace.json is a compiled output in a Scaffoldizr repository. Render it, but never edit it — it is overwritten on the next export.

Recommended flow

1. Find the workspace. Look for ./architecture/workspace.json. If only workspace.dsl exists, export it first and say so; do not silently render a stale JSON.

2. Render it, into a temporary directory rather than the repository, unless the user asked for the output to be kept:

   npx github:FormulaMonks/renderizr ./architecture/workspace.json --single-file --out /tmp/renderizr-out
   

3. Check it is genuinely self-contained before handing it over — see verifying. One command, and it is the difference between an artifact that opens and one that renders blank for the recipient.

4. Hand over artifact.html. Say which file it is and roughly how big; a real model lands around 1 MB.

Flags

Full reference in flags. The ones that matter most:

--font and a remote --logo are the only things that need network access during a build. Without them a render is fully offline.

Things that will bite you

Each of these has been verified against the tool, not inferred:

• Node 20 is a hard floor. npx runs against whatever Node is first on PATH, which is often not the one the shell reports. Renderizr checks and exits with a clear message rather than failing deep inside the build.
• artifact.html and index.html are not interchangeable. See the table above.
• The output directory is emptied before writing. Never point --out at a directory holding anything you want to keep.
• https:// in the output is not a leak. A rendered page contains ordinary hyperlinks to structurizr.com, c4model.com and the like. Self-containment is about asset references — <script src>, <link href>, <img src> — of which there are none. Check the right thing; see verifying.
• Working inside a clone of the Renderizr repository is different. pnpm build <workspace> [flags] — and specifically not pnpm build -- <workspace> --flag, which makes the flag arrive as a second workspace. pnpm dev is the opposite and does want the --. This only applies inside the repository; npx users are unaffected.

References

• flags — every CLI flag, what it does, and what it costs
• artifacts — the Claude artifact path in detail, including size and what to hand over
• verifying — proving an artifact is self-contained before you hand it over