feat: PlantUML online support (#389)

Co-authored-by: Christoph Welcz <christoph@welcz.de>
slidevjs · Nov 1, 2021 · bffec8a · bffec8a
1 parent 091107b
commit bffec8a
Show file tree

Hide file tree

Showing 10 changed files with 154 additions and 12 deletions.
diff --git a/demo/starter/slides.md b/demo/starter/slides.md
@@ -318,9 +318,9 @@ $$
 
 You can create diagrams / graphs from textual descriptions, directly in your Markdown.
 
-<div class="grid grid-cols-2 gap-10 pt-4 -mb-6">
+<div class="grid grid-cols-3 gap-10 pt-4 -mb-6">
 
-```mermaid {scale: 0.9}
+```mermaid {scale: 0.5}
 sequenceDiagram
     Alice->John: Hello John, how are you?
     Note over Alice,John: A typical interaction
@@ -333,6 +333,41 @@ C -->|One| D[Result 1]
 C -->|Two| E[Result 2]
 ```
 
+```plantuml {scale: 0.7}
+@startuml
+
+package "Some Group" {
+  HTTP - [First Component]
+  [Another Component]
+}
+
+node "Other Groups" {
+  FTP - [Second Component]
+  [First Component] --> FTP
+}
+
+cloud {
+  [Example 1]
+}
+
+
+database "MySql" {
+  folder "This is my folder" {
+    [Folder 3]
+  }
+  frame "Foo" {
+    [Frame 4]
+  }
+}
+
+
+[Another Component] --> [Example 1]
+[Example 1] --> [Folder 3]
+[Folder 3] --> [Frame 4]
+
+@enduml
+```
+
 </div>
 
 [Learn More](https://sli.dev/guide/syntax.html#diagrams)

diff --git a/packages/client/builtin/PlantUml.vue b/packages/client/builtin/PlantUml.vue
@@ -0,0 +1,29 @@
+<!--
+PlantUML
+(auto transformed, you don't need to use this component directly)
+
+Usage:
+
+```plantuml
+@startuml
+Alice -> Bob : Hello!
+@enduml
+```
+-->
+<template>
+  <img alt="PlantUML diagram" :src="uri" :style="{scale}" />
+</template>
+
+<script setup lang="ts">
+
+import { computed } from 'vue'
+
+const props = defineProps<{
+  code: string
+  server: string
+  scale?: number
+}>()
+
+const uri = computed(() => `${props.server}/svg/${props.code}`)
+
+</script>
diff --git a/packages/parser/src/config.ts b/packages/parser/src/config.ts
@@ -24,6 +24,7 @@ export function resolveConfig(headmatter: any, themeMeta: SlidevThemeMeta = {})
     themeConfig: {},
     fonts: {} as ResolvedFontOptions,
     drawings: {} as ResolvedDrawingsOptions,
+    plantUmlServer: 'https://www.plantuml.com/plantuml',
   }
   const config: SlidevConfig = {
     ...defaultConfig,

diff --git a/packages/slidev/node/plugins/markdown.ts b/packages/slidev/node/plugins/markdown.ts
@@ -10,6 +10,7 @@ import type { KatexOptions } from 'katex'
 import type MarkdownIt from 'markdown-it'
 import type { ShikiOptions } from '@slidev/types'
 import * as Shiki from 'shiki'
+import { encode } from 'plantuml-encoder'
 import { ResolvedSlidevOptions, SlidevPluginOptions } from '../options'
 import Katex from './markdown-it-katex'
 import { loadSetups } from './setupNode'
@@ -82,6 +83,7 @@ export async function createMarkdownPlugin(
 
         code = transformSlotSugar(code)
         code = transformMermaid(code)
+        code = transformPlantUml(code, config.plantUmlServer)
         code = monaco(code)
         code = transformHighlighter(code)
         code = transformPageCSS(code, id)
@@ -205,6 +207,15 @@ export function transformMermaid(md: string): string {
     })
 }
 
+export function transformPlantUml(md: string, server: string): string {
+  return md
+    .replace(/^```plantuml\s*?({.*?})?\n([\s\S]+?)\n```/mg, (full, options = '', content = '') => {
+      const code = encode(content.trim())
+      options = options.trim() || '{}'
+      return `<PlantUml :code="'${code}'" :server="'${server}'" v-bind="${options}" />`
+    })
+}
+
 /**
  * Escape `{{}}` in code block to prevent Vue interpret it, #99
  */

diff --git a/packages/slidev/package.json b/packages/slidev/package.json
@@ -72,6 +72,7 @@
     "nanoid": "^3.1.30",
     "open": "^8.3.0",
     "pdf-lib": "^1.17.0",
+    "plantuml-encoder": "^1.4.0",
     "prismjs": "^1.25.0",
     "prompts": "^2.4.2",
     "resolve": "^1.20.0",
@@ -90,6 +91,7 @@
     "yargs": "^17.2.1"
   },
   "devDependencies": {
+    "@types/plantuml-encoder": "^1.4.0",
     "fast-deep-equal": "^3.1.3",
     "semver": "^7.3.5",
     "sirv": "^1.0.18"

diff --git a/packages/types/src/config.ts b/packages/types/src/config.ts
@@ -106,6 +106,13 @@ export interface SlidevConfig {
    * Options for drawings
    */
   drawings: ResolvedDrawingsOptions
+
+  /**
+   * URL of PlantUML server used to render diagrams
+   *
+   * @default https://www.plantuml.com/plantuml
+   */
+  plantUmlServer: string
 }
 
 export interface FontOptions {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/test/__snapshots__/parser.test.ts.snap b/test/__snapshots__/parser.test.ts.snap
@@ -71,6 +71,7 @@ Object {
   "layout": "cover",
   "lineNumbers": false,
   "monaco": "dev",
+  "plantUmlServer": "https://www.plantuml.com/plantuml",
   "remoteAssets": false,
   "routerMode": "history",
   "selectable": false,
@@ -282,6 +283,7 @@ Object {
   "info": false,
   "lineNumbers": false,
   "monaco": "dev",
+  "plantUmlServer": "https://www.plantuml.com/plantuml",
   "remoteAssets": false,
   "routerMode": "history",
   "selectable": false,
@@ -443,6 +445,7 @@ Object {
   "info": false,
   "lineNumbers": false,
   "monaco": "dev",
+  "plantUmlServer": "https://www.plantuml.com/plantuml",
   "remoteAssets": false,
   "routerMode": "history",
   "selectable": false,

diff --git a/test/__snapshots__/transform.test.ts.snap b/test/__snapshots__/transform.test.ts.snap
@@ -31,6 +31,16 @@ exports[`markdown transform Mermaid 1`] = `
 "
 `;
 
+exports[`markdown transform PlantUML 1`] = `
+"
+# Page
+
+<PlantUml :code=\\"'SoWkIImgAStDuNBCoKnELT2rKt3AJrAmKl18pSd9XmhQw28BwYYKvEShSZcavgK0zG40'\\" :server=\\"'https://www.plantuml.com/plantuml'\\" v-bind=\\"{}\\" />
+
+<PlantUml :code=\\"'JOzD3e8m44Rtd6BMtNW192IM5I29HEDsAbKdeLD2MvNRIsjCMCsRlFd9LpgFipV4Wy4f4o2r8kHC23Yhm3wi9A0X3XzeYNrgwx1H6wvb1KTjqtRJoYhMtexBSAqJUescwoEUq4tn3xp9Fm7XfUS5HiiFO3Gw7SjT4QUCkkKxLy2-WAvl3rkrtEclBdOCXcnMwZN7ByiN'\\" :server=\\"'https://www.plantuml.com/plantuml'\\" v-bind=\\"{scale: 0.5}\\" />
+"
+`;
+
 exports[`markdown transform slot-sugar 1`] = `
 "
 # Page 

diff --git a/test/transform.test.ts b/test/transform.test.ts
@@ -1,4 +1,9 @@
-import { transformMermaid, transformPageCSS, transformSlotSugar } from '../packages/slidev/node/plugins/markdown'
+import {
+  transformMermaid,
+  transformPageCSS,
+  transformPlantUml,
+  transformSlotSugar,
+} from '@slidev/cli/node/plugins/markdown'
 
 describe('markdown transform', () => {
   it('slot-sugar', () => {
@@ -80,4 +85,34 @@ C -->|Two| E[Result 2]
 \`\`\`
 `)).toMatchSnapshot()
   })
+
+  it('PlantUML', () => {
+    expect(transformPlantUml(`
+# Page
+
+\`\`\`plantuml
+@startuml
+Alice -> Bob : Hello
+Alice <- Bob : Hello, too!
+@enduml
+\`\`\`
+
+\`\`\`plantuml {scale: 0.5}
+@startmindmap
+* Debian
+** Ubuntu
+*** Linux Mint
+*** Kubuntu
+*** Lubuntu
+*** KDE Neon
+** LMDE
+** SolydXK
+** SteamOS
+** Raspbian with a very long name
+*** <s>Raspmbc</s> => OSMC
+*** <s>Raspyfi</s> => Volumio
+@endmindmap
+\`\`\`
+`, 'https://www.plantuml.com/plantuml')).toMatchSnapshot()
+  })
 })