Add configurable and disableable Kroki diagram rendering (#1410)

* Add configurable and disableable Kroki diagram rendering

* Update README.md

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

* Update src/Markdown-it.ts

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

* Update src/Markdown-it.ts

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

---------

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

Author: evilz

README.md

@@ -114,6 +114,21 @@ highlightTheme : "other theme"
 
 Get the theme list here https://highlightjs.org/
 
+## <a id="diagramserver"></a> Diagram server (Kroki)
+
+Diagram languages supported by Kroki (for example `mermaid`, `plantuml`, `graphviz`, etc.) can be rendered remotely.
+
+- `revealjs.diagramServerEnabled` (default: `true`) keeps current behavior and renders diagrams as images.
+- `revealjs.diagramServerUrl` (default: `https://kroki.io`) lets you target your own Kroki-compatible endpoint.
+
+For a fully local/offline mode, set:
+
+```
+diagramServerEnabled: false
+```
+
+In this mode, diagram code blocks are kept as plain code blocks and no remote diagram request is made.
+
 ## <a id="options"></a> Reveal.js Options
 
 
@@ -130,6 +145,8 @@ You can customize many setting on for your reveal.js presentation.
 )$</code></td></tr>
 <tr><td><code>revealjs.theme</code></td><td>Revealjs Theme (black, white, league, beige, sky, night, serif, simple, solarized</td><td><code>black</code></td></tr>
 <tr><td><code>revealjs.highlightTheme</code></td><td>Highlight Theme</td><td><code>Zenburn</code></td></tr>
+<tr><td><code>revealjs.diagramServerEnabled</code></td><td>Enable remote diagram rendering through a Kroki-compatible server</td><td><code>true</code></td></tr>
+<tr><td><code>revealjs.diagramServerUrl</code></td><td>Base URL of the Kroki-compatible diagram server</td><td><code>https://kroki.io</code></td></tr>
 <tr><td><code>revealjs.controls</code></td><td>Display controls in the bottom right corner</td><td><code>true</code></td></tr><tr><td><code>revealjs.progress</code></td><td>Display a presentation progress bar</td><td><code>true</code></td></tr><tr><td><code>revealjs.slideNumber</code></td><td>Display the page number of the current slide</td><td><code></code></td></tr><tr><td><code>revealjs.history</code></td><td>Push each slide change to the browser history</td><td><code></code></td></tr><tr><td><code>revealjs.keyboard</code></td><td>Enable keyboard shortcuts for navigation</td><td><code>true</code></td></tr><tr><td><code>revealjs.overview</code></td><td>Enable the slide overview mode</td><td><code>true</code></td></tr><tr><td><code>revealjs.center</code></td><td>Vertical centering of slides</td><td><code>true</code></td></tr><tr><td><code>revealjs.touch</code></td><td>Enables touch navigation on devices with touch input</td><td><code>true</code></td></tr><tr><td><code>revealjs.loop</code></td><td>Loop the presentation</td><td><code></code></td></tr><tr><td><code>revealjs.rtl</code></td><td>Change the presentation direction to be RTL</td><td><code></code></td></tr><tr><td><code>revealjs.shuffle</code></td><td>Randomizes the order of slides each time the presentation loads</td><td><code></code></td></tr><tr><td><code>revealjs.fragments</code></td><td>Turns fragments on and off globally</td><td><code>true</code></td></tr><tr><td><code>revealjs.embedded</code></td><td>Flags if the presentation is running in an embedded mode, i.e. contained within a limited portion of the screen</td><td><code></code></td></tr><tr><td><code>revealjs.help</code></td><td>Flags if we should show a help overlay when the questionmark key is pressed</td><td><code>true</code></td></tr><tr><td><code>revealjs.showNotes</code></td><td>Flags if speaker notes should be visible to all viewers</td><td><code></code></td></tr><tr><td><code>revealjs.autoSlide</code></td><td>Number of milliseconds between automatically proceeding to the next slide, disabled when set to 0, this value can be overwritten by using a data-autoslide attribute on your slides</td><td><code></code></td></tr><tr><td><code>revealjs.autoSlideMethod</code></td><td>The direction in which the slides will move whilst autoslide is activet</td><td><code>Reveal.navigateNext</code></td></tr><tr><td><code>revealjs.autoSlideStoppable</code></td><td>Stop auto-sliding after user input</td><td><code>true</code></td></tr><tr><td><code>revealjs.mouseWheel</code></td><td>Enable slide navigation via mouse wheel</td><td><code></code></td></tr><tr><td><code>revealjs.hideAddressBar</code></td><td>Hides the address bar on mobile devices</td><td><code>true</code></td></tr><tr><td><code>revealjs.previewLinks</code></td><td>Opens links in an iframe preview overlay</td><td><code></code></td></tr><tr><td><code>revealjs.transition</code></td><td>Transition style (none/fade/slide/convex/concave/zoom)</td><td><code>default</code></td></tr><tr><td><code>revealjs.transitionSpeed</code></td><td>Transition speed (default/fast/slow)</td><td><code>default</code></td></tr><tr><td><code>revealjs.backgroundTransition</code></td><td>Transition style for full page slide backgrounds (none/fade/slide/convex/concave/zoom)</td><td><code>default</code></td></tr><tr><td><code>revealjs.viewDistance</code></td><td>Number of slides away from the current that are visible</td><td><code>3</code></td></tr><tr><td><code>revealjs.parallaxBackgroundImage</code></td><td>Parallax background image</td><td><code></code></td></tr><tr><td><code>revealjs.parallaxBackgroundSize</code></td><td>Parallax background size (CSS syntax, e.g. 2100px 900px)</td><td><code></code></td></tr><tr><td><code>revealjs.parallaxBackgroundHorizontal</code></td><td>Number of pixels to move the parallax background per slide</td><td><code></code></td></tr><tr><td><code>revealjs.parallaxBackgroundVertical</code></td><td>Number of pixels to move the parallax background per slide</td><td><code></code></td></tr></table>
 
 

package.json

@@ -242,6 +242,16 @@
           "default": "monokai",
           "description": "highlight.js Theme"
         },
+        "revealjs.diagramServerEnabled": {
+          "type": "boolean",
+          "default": true,
+          "description": "Enable remote diagram rendering for supported diagram languages via a Kroki-compatible server"
+        },
+        "revealjs.diagramServerUrl": {
+          "type": "string",
+          "default": "https://kroki.io",
+          "description": "Base URL for the Kroki-compatible diagram server used to render supported diagram languages"
+        },
         "revealjs.controls": {
           "type": "boolean",
           "default": true,

src/Configuration.ts

@@ -85,6 +85,9 @@ export interface IRevealOptions {
 
   css: string[]
   cssvariables: object | null
+
+  diagramServerEnabled: boolean
+  diagramServerUrl: string
 }
 export interface IExtensionOptions {
   slideExplorerEnabled: boolean
@@ -169,7 +172,10 @@ export const defaultConfiguration: Configuration = {
   enableSearch: true,
 
   css: [],
-  cssvariables: null
+  cssvariables: null,
+
+  diagramServerEnabled: true,
+  diagramServerUrl: 'https://kroki.io'
 }
 
 

src/Markdown-it.ts

@@ -19,6 +19,29 @@ import {notesSeparator} from './utils'
 
 import pako from 'pako'
 
+const DEFAULT_DIAGRAM_SERVER = 'https://kroki.io'
+
+interface IDiagramRenderingConfig {
+  enabled: boolean
+  serverBaseUrl: string
+}
+
+const diagramRenderingConfig: IDiagramRenderingConfig = {
+  enabled: true,
+  serverBaseUrl: DEFAULT_DIAGRAM_SERVER,
+}
+
+export const setDiagramRenderingConfig = (config: Partial<IDiagramRenderingConfig>) => {
+  if (typeof config.enabled === 'boolean') {
+    diagramRenderingConfig.enabled = config.enabled
+  }
+
+  if (typeof config.serverBaseUrl === 'string') {
+    const trimmedServerBaseUrl = config.serverBaseUrl.trim().replace(/\/$/, '')
+    diagramRenderingConfig.serverBaseUrl = trimmedServerBaseUrl || DEFAULT_DIAGRAM_SERVER
+  }
+}
+
 const note = (markdown, config) => {
   const notesSeparator = config.notesSeparator
   const notesClass = 'notes'
@@ -107,13 +130,15 @@ const markdown = md({
 // add kroki
   const highlight = markdown.options.highlight
   markdown.options.highlight = (code, lang, attr) => {
-    const server = 'https://kroki.io' //TODO config.serverPath || '//www.plantuml.com/plantuml/svg/';
-
     if (lang && diagramTypes.indexOf(lang.toLowerCase()) >= 0) {
+      if (!diagramRenderingConfig.enabled) {
+        return `<pre><code class="language-${lang.toLowerCase()}">${markdown.utils.escapeHtml(code)}</code></pre>`
+      }
+
       const data = Buffer.from(code, 'utf8')
       const compressed = pako.deflate(data, { level: 9 })
       const result = Buffer.from(compressed).toString('base64').replace(/\+/g, '-').replace(/\//g, '_')
-      return `<pre style="all:unset;"><div><img class="${lang}" src="${server}/${lang}/svg/${result}" /></div></pre>`
+      return `<pre style="all:unset;"><div><img class="${lang.toLowerCase()}" src="${diagramRenderingConfig.serverBaseUrl}/${lang.toLowerCase()}/svg/${result}" /></div></pre>`
     }
     if (highlight !== null && highlight !== undefined) {
       return highlight(code, lang, attr)

src/RevealServer.ts

@@ -5,7 +5,7 @@ import * as ejs from 'ejs'
 import cors from 'cors'
 import morgan from 'morgan'
 import * as path from 'path'
-import markdownit from './Markdown-it'
+import markdownit, { setDiagramRenderingConfig } from './Markdown-it'
 import { exportHTML, IExportOptions } from './ExportHTML'
 import { Disposable } from './dispose'
 import { RevealContext } from './RevealContext'
@@ -114,6 +114,11 @@ export class RevealServer extends Disposable {
           }
         }
 
+        setDiagramRenderingConfig({
+          enabled: context.configuration.diagramServerEnabled,
+          serverBaseUrl: context.configuration.diagramServerUrl,
+        })
+
         const htmlSlides = context.slides.map((s) => ({
           ...s,
           html: markdownit.render(s.text),

src/test/UnitTests/MarkdownItDiagramServer.jest.ts

@@ -0,0 +1,25 @@
+import markdownit, { setDiagramRenderingConfig } from '../../Markdown-it'
+
+describe('Markdown-it diagram server configuration', () => {
+  afterEach(() => {
+    setDiagramRenderingConfig({ enabled: true, serverBaseUrl: 'https://kroki.io' })
+  })
+
+  test('uses the configured diagram server base URL', () => {
+    setDiagramRenderingConfig({ serverBaseUrl: 'http://localhost:8000/' })
+
+    const html = markdownit.render('```mermaid\nflowchart LR\nA-->B\n```')
+
+    expect(html).toContain('src="http://localhost:8000/mermaid/svg/')
+  })
+
+  test('falls back to a local code block when diagram rendering is disabled', () => {
+    setDiagramRenderingConfig({ enabled: false })
+
+    const html = markdownit.render('```plantuml\nAlice -> Bob: hello\n```')
+
+    expect(html).toContain('<pre><code class="language-plantuml">')
+    expect(html).toContain('Alice -&gt; Bob: hello')
+    expect(html).not.toContain('<img class="plantuml"')
+  })
+})