Render LLM-authored Mermaid architecture diagrams with ELK layout, shared icons, and a strict security posture
Use this when a frontend needs richer architecture diagrams from untrusted LLM output without falling back to fake CSS overlays or weakening Mermaid security. It applies especially to AKS/Azure visuals where nested subgraphs, multiline subtitles, and shared icon registries matter.
diagram string for grouped architectures; keep nodes/edges only as a legacy fallback.@mermaid-js/layout-elk and set defaultRenderer: 'elk' for cleaner clustered layouts.\\n to <br/>, then run sanitizeDiagramInput() before Mermaid render. Preserve securityLevel: 'antiscript'.%%icon:name%% only after render, only for allowlisted keys, and only from a shared registry. Unknown keys should collapse to plain text.public/assets/architecture-diagram/) and resolve them through a local registry module instead of keeping a private package in the web dependency path.tsc, add narrow web-only shims for the exact runtime APIs you use.packages/web/src/catalog/components/architectureDiagramUtils.tspackages/web/src/catalog/components/ArchitectureDiagram.tsxpackages/core/src/services/a2ui-schema.ts, packages/core/src/prompts/system-prompt.ts, packages/core/src/prompts/component-catalog.tspackages/web/src/catalog/components/architectureDiagramUtils.test.tssecurityLevel: 'loose' for convenience.