Render mermaid diagram per risk assessment scope

Each scope card now shows a flowchart of its nodes, processes, and
threats, with a distinct shape per type: stadium for entities,
hexagon for boundaries, rectangle for assets, cylinder for data, and
a red hexagon for threats attached via dashed edges to their process
target. The Mermaid source is built on the backend and exposed as a
new `mermaid` field on RiskAssessmentScope; the frontend just renders
it via @probo/ui's MermaidDiagram and shows a copy button + legend.

Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>

packages/ui/src/Atoms/Markdown/MermaidDiagram.tsx

@@ -24,13 +24,19 @@ export function MermaidDiagram({ chart }: Props) {
   const [svg, setSvg] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
 
+  const source = (chart ?? "").trim();
+
   useEffect(() => {
+    if (!source) {
+      return;
+    }
+
     let cancelled = false;
 
     mermaid.initialize({ startOnLoad: false, theme: "neutral" });
 
     mermaid
-      .render(`mermaid-${id}`, chart.trim())
+      .render(`mermaid-${id}`, source)
       .then((result) => {
         if (!cancelled) {
           setSvg(result.svg);
@@ -46,7 +52,7 @@ export function MermaidDiagram({ chart }: Props) {
     return () => {
       cancelled = true;
     };
-  }, [chart, id]);
+  }, [source, id]);
 
   if (error) {
     return (

packages/ui/src/index.ts

@@ -47,6 +47,7 @@ export { PropertyRow } from "./Atoms/PropertyRow/PropertyRow";
 export { Table, Tbody, Td, Th, Thead, Tr, TrButton } from "./Atoms/Table/Table";
 export { TabBadge, TabItem, TabLink, Tabs } from "./Atoms/Tabs/Tabs";
 export { Markdown } from "./Atoms/Markdown/Markdown";
+export { MermaidDiagram } from "./Atoms/Markdown/MermaidDiagram";
 export { Dropzone } from "./Atoms/Dropzone/Dropzone";
 export { ControlItem } from "./Atoms/ControlItem/ControlItem";
 export { InfiniteScrollTrigger } from "./Atoms/InfiniteScrollTrigger/InfiniteScrollTrigger";