renderizr

Renderizr — Structurizr ワークスペースを共有可能な1つのファイルに

このスキルは、Structurizr ワークスペース（ビュー、ドキュメント、決定ログを含む）を、閲覧可能な静的サイト、または Claude アーティファクトとしてアップロードでき、誰でもサーバーもネットワークも必要とせずに開ける、自己完結型の単一 HTML ファイルにレンダリングします。

Renderizr は、ワークスペースに記述されたすべての情報（配置、スタイル、テーマ、形状、ルーティング）をもとに、独自のエンジンで図を描画します。そのため、Structurizr と同じように、図をパン、ズームでき、動的ビューをアニメーション表示できます。

このスキルを使用する場面

• ユーザーがアーキテクチャモデルのソースを読むのではなく、確認したい場合。
• Structurizr アカウントもサーバーも DSL のコピーも持たない人と、モデルを共有したい場合。
• ユーザーがアーティファクトやプレビューを求めている場合、または「図を公開して」と依頼した場合。
• Scaffoldizr で作成されたものなど、./architecture フォルダーのあるリポジトリで作業しており、その内容を出力したい場合。

モデルの作成や編集には、このスキルを使用しないでください。それは Scaffoldizr の役割です。Renderizr はワークスペースをレンダリングします。また、編集モード（npx renderizr edit）ではブラウザー上でビューのレイアウトを調整できますが、エージェントが編集モードを操作することはありません。

1つのコマンド

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

このコマンドは、<dir> に次の2つのファイルを書き出します。

ファイル	内容	用途
artifact.html	独自の <html>／<head>／<body> 骨組みを含まないページ	Claude アーティファクトとしてアップロードする場合 — ホストがドキュメントを提供します
index.html	同じページを完全な単独ドキュメントにしたもの	ディスクから開く、メールで送る、バケットに配置する場合

どちらのファイルも、すべてのスタイルシート、スクリプト、フォント、アイコン、ワークスペースをインライン化します。ネットワークリクエストは一切発生しません。

Claude アーティファクトには、artifact.html を使用してください。 代わりに index.html を渡すと、ドキュメント内にドキュメントが入れ子になります。

--single-file を外すと、静的サーバーや GitHub Pages でホスティングするための index.html と assets/ を含むディレクトリが生成されます。

レンダリングするワークスペースを用意する

Renderizr が受け取るのはJSONで、ローカルパスまたは URL を指定できます。DSL は解析しません。

• ディスク上に workspace.json がある場合 — 通常は ./architecture/workspace.json です。これをそのまま使用します。

• workspace.dsl しかない場合 — structurizr-cli でエクスポートします。DSL のワークスペースを JSON にエクスポートできます。Scaffoldizr リポジトリでは、./architecture/scripts/export.sh（または export.ps1）を実行すればエクスポートできます。

• URL の場合 — そのまま渡します。たとえば、Big Bank plc の例は次のとおりです。

  npx github:FormulaMonks/renderizr \
    https://raw.githubusercontent.com/structurizr/structurizr/main/structurizr-export/src/test/resources/big-bank-plc.json \
    --single-file --out /tmp/big-bank
  

Scaffoldizr リポジトリでは、workspace.json にエクスポートされたモデルだけでなく、ビューのレイアウトも保存されます。Renderizr の編集モードと Structurizr Local はレイアウトをこのファイルに保存し、Structurizr の merge は DSL の変更後もレイアウトを保持します。このファイルをレンダリングに使用し、手作業で編集しないでください。

推奨フロー

1. ワークスペースを探します。 ./architecture/workspace.json を確認します。workspace.dsl しかない場合は、先にエクスポートすることを伝え、古い JSON を黙ってレンダリングしないでください。レイアウトを保持している workspace.json をエクスポートで上書きすると、レイアウトが失われます。ファイルがある場合は、merge -layout workspace.json を指定してエクスポートします。

2. レンダリングします。 ユーザーから出力を残すよう依頼されていない限り、リポジトリではなく一時ディレクトリに出力します。

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

3. 渡す前に、本当に自己完結していることを確認します。検証方法を参照してください。コマンドを1つ実行するだけで、アーティファクトが開くか、受け取った人の画面で何も表示されないかが決まります。

4. artifact.html を渡します。 どのファイルかと、おおよそのサイズを伝えます。実際のモデルでは約1 MB になります。Claude アーティファクトとして自分で公開する場合は、ビューをエクスポートできるように、downloads 機能を宣言します（例：capabilities: {downloads: true}）。

フラグ

完全なリファレンスはフラグをご覧ください。特に重要なものは次のとおりです。

フラグ	効果
--single-file	artifact.htmlを含む、自己完結型のドキュメントを1つ生成します。アーティファクトにはこちらを使用してください。
-o, --out <dir>	出力ディレクトリ（デフォルトはstructurizr-output）
--base <path>	複数ファイルビルド用のベース公開パス。たとえば、プロジェクトのPagesでは/repo-name/を指定します
--logo <path|url>	ヘッダーの左上に表示する画像。データURIとして埋め込まれます
--font <family>	Google Web Font。ビルド時に取得され、woff2として埋め込まれます

ビルド中にネットワークアクセスが必要なのは、--fontとリモートの--logoだけです。これらを指定しなければ、完全にオフラインでレンダリングできます。

注意が必要な点

以下はそれぞれ、ツールを使って確認済みです。

• Node 20が必須の最低バージョンです。 npxはPATHで最初に見つかったNodeを使用しますが、シェルが報告するNodeとは異なることがよくあります。Renderizrはビルドの奥深くで失敗するのではなく、明確なメッセージを表示して終了します。
• artifact.htmlとindex.htmlは互換性がありません。 上の表をご覧ください。
• downloadsを指定しないアーティファクトはエクスポートできません。 アーティファクトビューアーでページからファイルを保存するには、downloads機能が必要です。これを宣言せずにartifact.htmlを公開すると、ページのエクスポートボタンは非表示になります。
• Renderizrは出力先ディレクトリの内容を消去してから書き込みます。残しておきたいものがあるディレクトリを--outに指定しないでください。
• 出力に含まれるhttps://は情報漏えいではありません。 レンダリングされたページには、structurizr.comやc4model.comなどへの通常のハイパーリンクが含まれます。自己完結型であるかどうかは、<script src>、<link href>、<img src>といったアセット参照を指します。これらは含まれません。確認すべき箇所に注意してください。詳しくは検証をご覧ください。
• Renderizrリポジトリのクローン内で作業する場合は、動作が異なります。 pnpm render <workspace> [flags]を実行してください。特に、pnpm render -- <workspace> --flagは使用しないでください。フラグが2つ目のワークスペースとして渡されます。一方、pnpm devでは--が必要です。この違いはリポジトリ内で作業する場合にのみ当てはまり、npxユーザーには影響しません。

リファレンス

• フラグ — CLIフラグの一覧、各フラグの動作とコスト
• アーティファクト — Claudeのアーティファクトの詳細。サイズや引き渡す内容も解説します
• 検証 — アーティファクトを引き渡す前に、自己完結型であることを証明する方法