@ankhorage/paradox 0.0.7 → 0.0.8

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.0.8
+
+### Patch Changes
+
+- 46fd38d: Render Mermaid diagrams visually in the generated static documentation app.
+
+  The generated `paradox/index.html` now loads Mermaid in the browser, renders diagram blocks visually, and keeps the raw Mermaid source available in a collapsible section for offline fallback, copying, and debugging.
+
 ## 0.0.7
 
 ### Patch Changes

package/README.md

@@ -1,6 +1,6 @@
 # @ankhorage/paradox
 
-![license: MIT](./paradox/badges/license.svg) ![npm: v0.0.6](./paradox/badges/npm.svg) ![runtime: bun](./paradox/badges/runtime.svg) ![typescript: strict](./paradox/badges/typescript.svg) ![eslint: checked](./paradox/badges/eslint.svg) ![prettier: checked](./paradox/badges/prettier.svg) ![build: checked](./paradox/badges/build.svg) ![tests: checked](./paradox/badges/tests.svg) ![docs: paradox](./paradox/badges/docs.svg)
+![license: MIT](./paradox/badges/license.svg) ![npm: v0.0.7](./paradox/badges/npm.svg) ![runtime: bun](./paradox/badges/runtime.svg) ![typescript: strict](./paradox/badges/typescript.svg) ![eslint: checked](./paradox/badges/eslint.svg) ![prettier: checked](./paradox/badges/prettier.svg) ![build: checked](./paradox/badges/build.svg) ![tests: checked](./paradox/badges/tests.svg) ![docs: paradox](./paradox/badges/docs.svg)
 
 Deterministic documentation generator for TypeScript packages.
 

package/dist/render/renderers/html.js

@@ -100,6 +100,8 @@ export function renderHtml({ diagrams, model, }) {
         padding: 1rem;
       }
       .empty { font-style: italic; color: #6f7f9c; }
+      .mermaid { margin: 1rem 0; overflow: auto; }
+      details > summary { cursor: pointer; color: #5e6d8c; font-size: 0.9rem; margin-top: 0.5rem; user-select: none; }
       @media (max-width: 900px) {
         .layout { grid-template-columns: 1fr; }
         .sidebar { position: static; max-height: none; border-right: 0; border-bottom: 1px solid #d8dfec; }
@@ -169,6 +171,10 @@ export function renderHtml({ diagrams, model, }) {
         }
       });
     </script>
+    <script type="module">
+      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+      mermaid.initialize({ startOnLoad: true });
+    </script>
   </body>
 </html>
 `,
@@ -270,7 +276,11 @@ function renderDiagramCard(diagram) {
     return `<article class="item" data-search="${escapeAttribute(`${diagram.title} ${diagram.path}`)}">
     <h3>${escapeHtml(diagram.title)}</h3>
     <p class="muted"><code>${escapeHtml(diagram.path)}</code></p>
-    <pre>${escapeHtml(diagram.content)}</pre>
+    <div class="mermaid">${escapeHtml(diagram.content)}</div>
+    <details>
+      <summary>View Mermaid source</summary>
+      <pre>${escapeHtml(diagram.content)}</pre>
+    </details>
   </article>`;
 }
 function renderInlineCodeList(values) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ankhorage/paradox",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Deterministic documentation generator for TypeScript packages.",
   "license": "MIT",
   "publishConfig": {