draw-json-architecture-skill

A skill that explains any code architecture as an interactive viewer — Graph + JSON + HTML, 100% driven by JSON — and saves the self-contained .html to your repo's root architecture/ folder.

Installation

• Define a flow — name the path you want explained, e.g. onboarding to home or home to order placement. The skill walks that flow stop by stop.
• Define the lenses — tell it which lenses each stop is viewed through, e.g. ui, api, database (also auth, cache, queue, llm, …), and pick a color for each so the diagram paints every stop in its lens color.
• Get the viewer — the skill generates a self-contained <flow>.html Architecture Viewer (Graph + JSON + HTML panels) driven entirely by JSON, then verifies links, claims, and the generated artifacts before delivery.

<a>

</a> Claude

/draw-json-architecture <flow>

<a>

</a> Codex

$draw-json-architecture <flow>

Wireframe

Architecture home-to-order.html

Architecture of sample-app flow from home to order placement screen drawn using draw-json-architecture skill.

<a href="architecture/home-to-order/home-to-order.html">

</a>

Changelog

Other Repos

<table>
<tr>
<td align="center" width="140">
<a href="https://github.com/shanraisshan/claude-code-best-practice">

</a><br>
<a href="https://github.com/shanraisshan/claude-code-best-practice"><strong>Claude Code<br>Best Practice</strong></a>
</td>
<td align="center" width="140">
<a href="https://github.com/shanraisshan/codex-cli-best-practice">

</a><br>
<a href="https://github.com/shanraisshan/codex-cli-best-practice"><strong>Codex CLI<br>Best Practice</strong></a>
</td>
<td align="center" width="140">
<a href="https://github.com/shanraisshan/gemini-cli-best-practice">

</a><br>
<a href="https://github.com/shanraisshan/gemini-cli-best-practice"><strong>Gemini CLI<br>Best Practice</strong></a>
</td>
<td align="center" width="140">
<a href="https://github.com/shanraisshan/claude-code-hooks">

</a><br>
<a href="https://github.com/shanraisshan/claude-code-hooks"><strong>Claude Code<br>Hooks</strong></a>
</td>
<td align="center" width="140">
<a href="https://github.com/shanraisshan/codex-cli-hooks">

</a><br>
<a href="https://github.com/shanraisshan/codex-cli-hooks"><strong>Codex CLI<br>Hooks</strong></a>
</td>
<td align="center" width="140">
<a href="https://github.com/shanraisshan/gemini-cli-hooks">

</a><br>
<a href="https://github.com/shanraisshan/gemini-cli-hooks"><strong>Gemini CLI<br>Hooks</strong></a>
</td>
</tr>
</table>