Replace MermaidContainerRenderer with mermaid fences + MermaidBlockRenderer

Author: mythz

MyApp/MarkdownPagesBase.cs

@@ -11,6 +11,7 @@
 using Markdig.Extensions.CustomContainers;
 using ServiceStack.IO;
 using ServiceStack.Text;
+using Markdig.Extensions.Diagrams;
 
 namespace MyApp;
 
@@ -112,6 +113,7 @@ public virtual MarkdownPipeline CreatePipeline()
             .UseAdvancedExtensions()
             .UseAutoLinkHeadings()
             .UseHeadingsMap()
+            .UseCustomDiagramExtension()
             .UseCustomContainers(MarkdigConfig.Instance.ConfigureContainers);
         MarkdigConfig.Instance.ConfigurePipeline?.Invoke(builder);
 
@@ -374,6 +376,45 @@ public void Setup(MarkdownPipeline pipeline, IMarkdownRenderer renderer)
     }
 }
 
+public class MermaidBlockRenderer(CodeBlockRenderer? underlyingRenderer = null) : HtmlObjectRenderer<CodeBlock>
+{
+    private readonly CodeBlockRenderer underlyingRenderer = underlyingRenderer ?? new CodeBlockRenderer();
+    protected override void Write(HtmlRenderer renderer, CodeBlock obj)
+    {
+        if (obj is not FencedCodeBlock fencedCodeBlock || obj.Parser is not FencedCodeBlockParser parser)
+        {
+            underlyingRenderer.Write(renderer, obj);
+            return;
+        }
+
+        var attributes = obj.TryGetAttributes() ?? new HtmlAttributes();
+        attributes.AddClass("mermaid not-prose");
+        var txt = GetContent(obj);
+        renderer
+            .Write("<pre")
+            .WriteAttributes(attributes)
+            .Write(">")
+            .Write(txt)
+            .WriteLine("</pre>");
+    }
+    private static string GetContent(LeafBlock obj)
+    {
+        var code = new StringBuilder();
+        foreach (var line in obj.Lines.Lines)
+        {
+            var slice = line.Slice;
+            if (slice.Text == null)
+                continue;
+
+            var lineText = slice.Text.Substring(slice.Start, slice.Length);
+            code.AppendLine();
+            code.Append(lineText);
+        }
+
+        return code.ToString();
+    }
+}
+
 public class FilesCodeBlockRenderer(CodeBlockRenderer? underlyingRenderer = null) : HtmlObjectRenderer<CodeBlock>
 {
     private readonly CodeBlockRenderer underlyingRenderer = underlyingRenderer ?? new CodeBlockRenderer();
@@ -614,55 +655,6 @@ protected override void Write(HtmlRenderer renderer, CustomContainer obj)
     }
 }
 
-public class MermaidContainerRenderer : HtmlObjectRenderer<CustomContainer>
-{
-    protected override void Write(HtmlRenderer renderer, CustomContainer obj)
-    {
-        renderer.EnsureLine();
-        if (renderer.EnableHtmlForBlock)
-        {
-            renderer.Write("<div class=\"mermaid-diagram\">");
-            renderer.WriteLine("<pre class=\"mermaid\">");
-        }
-
-        // Write the Mermaid diagram content
-        if (obj.FirstOrDefault() is LeafBlock leafBlock)
-        {
-            // There has to be an official API to resolve the original text from a renderer?
-            string? FindOriginalText(ContainerBlock? block)
-            {
-                if (block != null)
-                {
-                    if (block.FirstOrDefault(x => x is LeafBlock { Lines.Count: > 0 }) is LeafBlock first)
-                        return first.Lines.Lines[0].Slice.Text;
-                    return FindOriginalText(block.Parent);
-                }
-
-                return null;
-            }
-
-            var originalSource = leafBlock.Lines.Count > 0
-                ? leafBlock.Lines.Lines[0].Slice.Text
-                : FindOriginalText(obj.Parent);
-            if (originalSource == null)
-            {
-                HostContext.Resolve<ILogger<PreContainerRenderer>>().LogError("Could not find original Text");
-                renderer.WriteLine($"Could not find original Text");
-            }
-            else
-            {
-                renderer.WriteEscape(originalSource.AsSpan().Slice(leafBlock.Span.Start, leafBlock.Span.Length));
-            }
-        }
-
-        if (renderer.EnableHtmlForBlock)
-        {
-            renderer.WriteLine("</pre>");
-            renderer.WriteLine("</div>");
-        }
-    }
-}
-
 public class IncludeContainerInlineRenderer : HtmlObjectRenderer<CustomContainerInline>
 {
     protected override void Write(HtmlRenderer renderer, CustomContainerInline obj)
@@ -812,7 +804,8 @@ public void AddBuiltInContainers(string[]? exclude = null)
     {
         CodeBlocks = new()
         {
-            ["files"] = origRenderer => new FilesCodeBlockRenderer(origRenderer)
+            ["files"] = origRenderer => new FilesCodeBlockRenderer(origRenderer),
+            ["mermaid"] = origRenderer => new MermaidBlockRenderer(origRenderer),
         };
         BlockContainers = new()
         {
@@ -846,7 +839,6 @@ public void AddBuiltInContainers(string[]? exclude = null)
             },
             ["pre"] = new PreContainerRenderer(),
             ["youtube"] = new YouTubeContainerRenderer(),
-            ["mermaid"] = new MermaidContainerRenderer(),
         };
         InlineContainers = new()
         {
@@ -915,6 +907,24 @@ public void Setup(MarkdownPipeline pipeline, IMarkdownRenderer renderer)
     }
 }
 
+public class CustomDiagramExtension : IMarkdownExtension
+{
+    public void Setup(MarkdownPipelineBuilder pipeline)
+    {
+    }
+
+    public void Setup(MarkdownPipeline pipeline, IMarkdownRenderer renderer)
+    {
+        if (renderer is HtmlRenderer htmlRenderer)
+        {
+            var codeRenderer = htmlRenderer.ObjectRenderers.FindExact<CodeBlockRenderer>()!;
+            // TODO: Add other well known diagram languages
+            //codeRenderer.BlocksAsDiv.Add("mermaid");
+            codeRenderer.BlocksAsDiv.Add("nomnoml");
+        }
+    }
+}
+
 public class HeadingsMapExtension : IMarkdownExtension
 {
     public void Setup(MarkdownPipelineBuilder pipeline)
@@ -1004,6 +1014,12 @@ public static MarkdownPipelineBuilder UseCustomContainers(this MarkdownPipelineB
         pipeline.Extensions.AddIfNotAlready(ext);
         return pipeline;
     }
+
+    public static MarkdownPipelineBuilder UseCustomDiagramExtension(this MarkdownPipelineBuilder pipeline)
+    {
+        pipeline.Extensions.ReplaceOrAdd<DiagramExtension>(new CustomDiagramExtension());
+        return pipeline;
+    }
 }
 
 public class DocumentMap

MyApp/MyApp.csproj

@@ -21,7 +21,7 @@
   </Target>
 
   <ItemGroup>
-    <PackageReference Include="Markdig" Version="0.33.*" />
+    <PackageReference Include="Markdig" Version="0.37.*" />
     <PackageReference Include="ServiceStack" Version="8.*" />
     <PackageReference Include="ServiceStack.Mvc" Version="8.*" />
 

MyApp/Pages/Shared/MermaidIncludes.cshtml

@@ -1,41 +1,35 @@
 <script type="module">
     import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
-    mermaid.initialize({ startOnLoad: true });
+    mermaid.initialize({ 
+        startOnLoad: true,
+        theme: 'base',
+        'themeVariables': {
+            'primaryColor': '#fff',
+            'lineColor': '#333',
+            'primaryBorderColor': 'rgb(67 56 202)', // text-indigo-700	
+            'secondaryColor': '#fff',
+            'primaryTextColor': '#333',
+            'tertiaryColor': '#333'
+        }        
+    });
 </script>
 <style>
-    .mermaid-diagram {
-        margin-top: 1rem;
-        margin-bottom: 1rem;
-        padding: 1rem;
-        background-color: #f3f4f6;
-        border-radius: 0.5rem;
-        overflow-x: auto;
-    }
-    .mermaid-diagram pre.mermaid {
-        font-size: 0.875rem;
-        background-color: #f3f4f6 !important;
-    }
-    /* Ensure text color remains visible in both light and dark modes */
-    .mermaid-diagram pre.mermaid,
-    .mermaid-diagram pre.mermaid * {
-        color: #333 !important;
-    }
-    /* Specifically target SVG text elements */
-    .mermaid-diagram pre.mermaid svg text {
-        fill: #333 !important;
-    }
-    /* Ensure edge labels remain visible */
-    .mermaid-diagram pre.mermaid .edgeLabel {
-        background-color: #f3f4f6;
-        color: #333;
-    }
-    /* Override any Tailwind dark mode styles */
-    @@media (prefers-color-scheme: dark) {
-    .mermaid-diagram pre.mermaid,
-    .mermaid-diagram pre.mermaid *,
-    .mermaid-diagram pre.mermaid svg text,
-    .mermaid-diagram pre.mermaid .edgeLabel {
-        color: #333 !important;
-    }
-    }
-</style>
+pre.mermaid {
+    background-color: #fff !important;
+}
+.dark pre.mermaid {
+    background-color: #000 !important; /*bg-gray-800*/
+}
+.dark pre.mermaid .edgeLabel, .dark pre.mermaid .edgeLabel p, .dark pre.mermad .labelBkg {
+    background-color: #000 !important;
+}
+.dark pre.mermaid .edgeLabel, .dark pre.mermaid .edgeLabel p {
+    color: rgb(209 213 219) !important;
+}
+.dark pre.mermaid .flowchart-link { 
+    stroke: rgb(209 213 219) !important;
+}
+.dark pre.mermaid .node rect {
+    stroke: #fff !important;
+}
+</style>

MyApp/_pages/ai-server/index.md

@@ -5,6 +5,20 @@ description: Introduction to AI Server and its key features
 
 AI Server is a way to orchestrate your AI requests through a single self-hosted application to control what AI Providers you use without impacting your client integrations. It serves as a private gateway to process LLM, AI, and image transformation requests, dynamically delegating tasks across multiple providers including Ollama, OpenRouter, Replicate, Comfy UI, utilizing models like Whisper, SDXL, Flux, and tools like ffmpeg.
 
+```mermaid
+flowchart TB
+    A[AI Server] 
+    A --> D{LLM APIs}
+    A --> C{Ollama}
+    A --> E{Media APIs}
+    A --> F{Comfy UI 
+    + 
+    FFmpeg}
+    D --> D1[OpenRouter / OpenAI / Mistral / Anthropic / Google Cloud / Groq]  
+    E --> E1[Replicate / dall-e-3 / Text to speech]
+    F --> F1[Diffusion / Whisper / TTS]
+```
+
 ## Key Features
 
 - **Unified AI Gateway**: Centralize all your AI requests through a single self-hosted service.

MyApp/_pages/ai-server/usage.md

@@ -108,7 +108,7 @@ Media endpoints are used for processing images, and videos. Videos are processed
 The AI Server is designed to be a lite-weight router for AI services, providing a common interface for AI services to be accessed via APIs with typed client support in many languages. 
 As such, heavy processing tasks are offloaded to other services, including self-hosted ones like the ComfyUI Agent.
 
-:::mermaid
+```mermaid
 graph TD
     A[API Client] -->|API Request| B(<img class="w-24 h-24" src="/img/logo.svg"/>)
     B -->|API Request| C[Replicate API]
@@ -122,4 +122,4 @@ graph TD
     E -->|AI Processing| L[Flux.1.Schnell]
     B -->|Image Processing| H[AI Server]
     B -->|AI Processing| E[ComfyUI Agent]
-:::
+```