diff --git a/media/preview.css b/media/preview.css
index 8bd5d59..0e10047 100644
--- a/media/preview.css
+++ b/media/preview.css
@@ -64,3 +64,10 @@ pre.mermaid[data-cw-error] { color: var(--vscode-errorForeground); }
 .cw-seg:last-child { border-radius: 0 3px 3px 0; border-left: none; }
 .cw-seg-on { background: var(--vscode-button-background); color: var(--vscode-button-foreground); }
 #cw-legend .cw-swatch { padding: 0 0.4em; border-radius: 3px; }
+
+/* F7.1 (#22) intra-diagram mermaid diff legend. */
+.cw-mermaid-legend { display: flex; gap: 0.6rem; font-size: 0.75em; opacity: 0.85; margin: 0.2rem 0 0.6rem; }
+.cw-mermaid-legend .cw-leg { padding: 0 0.4em; border-radius: 3px; border: 1px solid; }
+.cw-mermaid-legend .cw-leg-add { color: #2ea043; border-color: #2ea043; }
+.cw-mermaid-legend .cw-leg-chg { color: #d29922; border-color: #d29922; }
+.cw-mermaid-legend .cw-leg-rem { color: #808080; border-color: #808080; border-style: dashed; }