Add mermaid suport

Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>
2026-03-09 18:48:24 +01:00
parent 85ed5296e7
commit c98ffaeda3
12 changed files with 4241 additions and 33 deletions
--- a/pkg/docgen/generator.go
+++ b/pkg/docgen/generator.go
@@ -26,10 +26,14 @@ import (
 	"github.com/yuin/goldmark"
 	"github.com/yuin/goldmark/extension"
 	gmhtml "github.com/yuin/goldmark/renderer/html"
+	"go.abhg.dev/goldmark/mermaid"
 	"go.probo.inc/probo/pkg/coredata"
 )

 var (
+	//go:embed mermaid.min.js
+	mermaidJSSource string
+
 	//go:embed template.html
 	htmlTemplateContent string

@@ -72,7 +76,13 @@ var (
 		},
 		"formatContent": func(content string) template.HTML {
 			md := goldmark.New(
-				goldmark.WithExtensions(extension.Table),
+				goldmark.WithExtensions(
+					extension.Table,
+					&mermaid.Extender{
+						RenderMode: mermaid.RenderModeClient,
+						NoScript:   true,
+					},
+				),
 				goldmark.WithRendererOptions(
 					gmhtml.WithUnsafe(),
 				),
@@ -209,6 +219,7 @@ type (
 		PublishedAt                 *time.Time
 		Signatures                  []SignatureData
 		CompanyHorizontalLogoBase64 string
+		MermaidJS                   template.JS
 	}

 	SignatureData struct {
@@ -321,6 +332,8 @@ const (
 )

 func RenderHTML(data DocumentData) ([]byte, error) {
+	data.MermaidJS = template.JS(mermaidJSSource)
+
 	var buf bytes.Buffer
 	if err := documentTemplate.Execute(&buf, data); err != nil {
 		return nil, fmt.Errorf("cannot execute template: %w", err)
--- a/pkg/docgen/mermaid.min.js
+++ b/pkg/docgen/mermaid.min.js
--- a/pkg/docgen/template.html
+++ b/pkg/docgen/template.html
@@ -341,7 +341,31 @@
            background: transparent;
            border: none;
        }
+
+        .document-content pre.mermaid {
+            border: none;
+            padding: 0;
+            background: transparent;
+            text-align: center;
+        }
+
+        .document-content pre.mermaid svg {
+            max-width: 100%;
+            height: auto;
+        }
    </style>
+    <script>{{.MermaidJS}}</script>
+    <script>
+        window.__mermaidReady = false;
+        mermaid.initialize({ startOnLoad: false, theme: 'neutral' });
+        document.addEventListener('DOMContentLoaded', function () {
+            mermaid.run().then(function () {
+                window.__mermaidReady = true;
+            }).catch(function () {
+                window.__mermaidReady = true;
+            });
+        });
+    </script>
 </head>
 <body>
    <div class="document-container">