feat: render safe lazy Mermaid diagrams in commit blocks

KNOWLEDGE_BASE.md

@@ -204,6 +204,11 @@ Sources: [translation endpoint](app/Http/Controllers/CommitTranslationController
 
 Commit and reply text supports inline code in backticks and fenced code blocks with syntax highlighting, a **Wrap lines** toggle, and a copy control. Text outside code supports emoji shortcodes, clickable URLs, and `@username` mentions. This is developer-oriented text formatting, not a full rich-text editor.
 
+A fenced `mermaid` block in a commit or reply renders as a diagram when it approaches the viewport, including in the draft preview. Switch to **Show source** to read or copy the exact diagram definition; zoom controls appear on rendered diagrams. Colors follow /dev/null's blue primary and green/purple/amber lane palette in both themes. Wide diagrams scroll horizontally on narrow screens instead of shrinking their labels; Mermaid `classDef` supports explicit semantic colors for success and failure. The diagram engine is loaded on demand, not with every log page. Invalid and oversized definitions (more than 6,000 characters) remain readable as source rather than disappearing. Rendering runs in Mermaid's strict security mode and its SVG is shown as an inert image, not inserted as live HTML. Static excerpts and private Remotes keep ordinary code blocks. No images or other diagram data are saved separately.
+
+Sources: [diagram component](resources/js/components/mermaid-diagram.tsx), [lazy renderer](resources/js/lib/mermaid-renderer.ts), [source parser](app/Services/CodeSpans.php).
+
+
 In commits, replies, and remotes, start a line with `>` to render a quote block. Consecutive quoted lines stay together; an unquoted line ends the block. Quotes keep inline code, links, mentions, and emoji formatting. A `>` inside code or in the middle of a line stays literal.
 
 Typing **@** in a composer opens developer suggestions. Use ↑/↓ to move, Enter or Tab to select, and Esc to dismiss. A bare @ suggests people you follow; typing more searches names and usernames. In replies, matching suggestions put the direct recipient first, then the root commit author, then other visible participants in that thread, followed by ordinary suggestions. Quotes prioritize only the quoted commit author. These priorities also apply to a bare @; typing a term still filters everyone, and yourself, muted developers, and blocked developers are excluded. In an org's messages, suggestions search the loaded member list instantly and update as membership refreshes. Suggestions are limited to the org's members, but you can still type anyone's handle yourself. Mentions link to profiles and can notify the mentioned developer after approval. Email addresses and scoped packages such as `@inertiajs/react` are not treated as mentions.

app/Services/CodeSpans.php

@@ -76,7 +76,7 @@ public function withoutCode(string $text): string
      * Splits the text into prose, inline code and highlighted code blocks. The highlighter escapes the code, so a
      * block's HTML is safe to render as is. The line breaks around a block are dropped, since it is a block already.
      *
-     * @return list<array{type: 'text', text: string}|array{type: 'code', code: string}|array{type: 'block', language: string|null, html: string}>
+     * @return list<array{type: 'text', text: string}|array{type: 'code', code: string}|array{type: 'block', language: string|null, html: string, source?: string}>
      */
     public function highlight(string $text): array
     {
@@ -124,17 +124,29 @@ private function isBlock(?string $part): bool
     }
 
     /**
-     * @return array{type: 'block', language: string|null, html: string}
+     * @return array{type: 'block', language: string|null, html: string, source?: string}
      */
     private function block(string $part): array
     {
         $lines = explode("\n", str_replace("\r\n", "\n", $part));
         $language = strtok(mb_ltrim($lines[0], '`'), " \t") ?: null;
+        $source = implode("\n", array_slice($lines, 1, -1));
+
+        // Preserve exact Mermaid source instead of sending highlighted HTML to the diagram renderer.
+        // The regular HTML field stays escaped for previews and non-interactive surfaces.
+        if ($language !== null && mb_strtolower($language) === 'mermaid') {
+            return [
+                'type' => 'block',
+                'language' => $language,
+                'html' => htmlspecialchars($source, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8'),
+                'source' => $source,
+            ];
+        }
 
         return [
             'type' => 'block',
             'language' => $language,
-            'html' => $this->highlighter->parse(implode("\n", array_slice($lines, 1, -1)), $language === null ? null : mb_strtolower($language)),
+            'html' => $this->highlighter->parse($source, $language === null ? null : mb_strtolower($language)),
         ];
     }
 }