{# Diagram region — UX-035 adopter #11.
   Contract: ~/.claude/skills/ux-architect/components/workspace-diagram-region.md (UX-061)

   v0.62 CSS refactor: inline Tailwind → semantic .dz-diagram-* classes
   (components/regions.css). Mermaid handles its own SVG chrome; this
   template owns only the scroll wrapper + initial source-flash. #}
{% from 'macros/region_wrapper.html' import region_card %}
{% call region_card(title) %}
  {% if diagram_data %}
  <div class="dz-diagram-scroll">
    <pre class="mermaid dz-diagram-source">{{ diagram_data }}</pre>
  </div>
  <script>
    if (typeof mermaid === "undefined") {
      var s = document.createElement("script");
      // Pinned version + SRI hash (#830 Phase 1 of external-resource hardening).
      // Hash regenerated when the pinned version is bumped — `curl -sL <url> |
      // openssl dgst -sha384 -binary | openssl base64 -A`.
      s.src = "https://cdn.jsdelivr.net/npm/mermaid@11.14.0/dist/mermaid.min.js";
      s.integrity = "sha384-1CMXl090wj8Dd6YfnzSQUOgWbE6suWCaenYG7pox5AX7apTpY3PmJMeS2oPql4Gk";
      s.crossOrigin = "anonymous";
      s.onload = function () {
        mermaid.initialize({ startOnLoad: true, theme: "neutral" });
        mermaid.run();
      };
      document.head.appendChild(s);
    } else {
      mermaid.run();
    }
  </script>
  {% else %}
  <p class="dz-diagram-empty">No entity relationships to display.</p>
  {% endif %}
{% endcall %}