Skip to content
Documentation

Build_render

FieldValue
TypeSkill Resource
Source~/.copilot/skills/technical-writing/references/mermaid/gallery/build/build_render.py
DescriptionNot specified

Source Content

#!/usr/bin/env python3
"""Emit render/index.html — loads vendored mermaid, renders every diagram,
and exposes the resulting SVG strings on window.__SVGS for harvesting."""


import json
from pathlib import Path
from diagrams import DIAGRAMS


HERE = Path(__file__).parent
RENDER = HERE / "render"
RENDER.mkdir(exist_ok=True)


payload = json.dumps(
    [{"id": d["id"], "keyword": d["keyword"], "code": d["code"]} for d in DIAGRAMS]
)


html = """<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- FontAwesome Free so inline `fas:`/`fab:` tokens paint as real icons in the
     harvested SVGs (mermaid emits <i class="fas fa-…">, FA's font paints it).
     Vendor fontawesome/ next to this file for an offline build; the CDN link is
     the online fallback. -->
<link rel="stylesheet" href="fontawesome/css/all.min.css"
      onerror="this.onerror=null;this.href='https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7/css/all.min.css'">
<style>
  body { font: 14px system-ui, sans-serif; margin: 24px; background:#fff; }
  .item { margin: 0 0 40px; padding: 16px; border: 1px solid #e2e8f0; border-radius: 10px; }
  .item h2 { font-size: 15px; margin: 0 0 12px; color:#0f172a; }
  .err { color:#b91c1c; font-family: monospace; white-space: pre-wrap; }
</style>
<script src="mermaid.min.js"></script>
</head>
<body>
<div id="root"></div>
<script>
  const DIAGRAMS = __PAYLOAD__;
  const root = document.getElementById('root');
  window.__SVGS = {};
  window.__ERRORS = {};
  window.__done = false;


  // Monotone-first house theme: neutral node fills, dark text, grey edges. Colour
  // never appears as a default — only where a diagram opts in with `style … fill:`.
  mermaid.initialize({
    startOnLoad: false,
    securityLevel: 'loose',
    theme: 'base',
    flowchart: { htmlLabels: true, useMaxWidth: false },
    themeVariables: {
      background: '#ffffff', primaryColor: '#ffffff', primaryTextColor: '#1b2431',
      primaryBorderColor: '#c6cbd3', secondaryColor: '#f1f5f9', tertiaryColor: '#ffffff',
      lineColor: '#586372', textColor: '#1b2431',
      clusterBkg: '#f8fafc', clusterBorder: '#c6cbd3', titleColor: '#1b2431',
      noteBkgColor: '#f1f5f9', noteTextColor: '#1b2431', noteBorderColor: '#c6cbd3',
      actorBkg: '#ffffff', actorBorder: '#c6cbd3', actorTextColor: '#1b2431',
    },
  });


  (async () => {
    for (const d of DIAGRAMS) {
      const item = document.createElement('div');
      item.className = 'item';
      const h = document.createElement('h2');
      h.textContent = d.id + '  (' + d.keyword + ')';
      item.appendChild(h);
      const holder = document.createElement('div');
      item.appendChild(holder);
      root.appendChild(item);
      try {
        const { svg } = await mermaid.render('m_' + d.id, d.code);
        holder.innerHTML = svg;
        window.__SVGS[d.id] = svg;
      } catch (e) {
        const msg = (e && e.message) ? e.message : String(e);
        window.__ERRORS[d.id] = msg;
        const pre = document.createElement('div');
        pre.className = 'err';
        pre.textContent = 'RENDER ERROR: ' + msg;
        holder.appendChild(pre);
      }
    }
    window.__done = true;
    document.title = 'done:' + Object.keys(window.__SVGS).length + ' err:' + Object.keys(window.__ERRORS).length;
    try {
      await fetch('/save', { method: 'POST', body: JSON.stringify(window.__SVGS) });
      window.__saved = true;
    } catch (e) { window.__saved = 'error: ' + e; }
  })();
</script>
</body>
</html>
"""


html = html.replace("__PAYLOAD__", payload)
(RENDER / "index.html").write_text(html, encoding="utf-8")
print(f"Wrote {RENDER/'index.html'} with {len(DIAGRAMS)} diagrams")