feat: mermaid diagrams support (#71)

* wip: basic mermaid support

* fix: regex for memraid

* feat: support for mermaid

* docs: update docs about diagrams

Author: antfu

README.md

@@ -56,7 +56,8 @@ Documentations and guides on **[Sli.dev](https://sli.dev)**
 - 🌈 [**Stylish**](https://sli.dev/guide/syntax.html#embedded-styles) - [Windi CSS](https://windicss.org/) on-demand utilities, easy-to-use embedded stylesheets
 - 🤹 [**Interactive**](https://sli.dev/custom/directory-structure.html#components) - embedding Vue components seamlessly
 - 🎙 [**Presenter Mode**](https://sli.dev/guide/presenter-mode.html) - use another window, or even your phone to control your slides
-- 🧮 [**LaTeX**](https://sli.dev/demo/starter/6) - Built-in LaTeX math equations support
+- 🧮 [**LaTeX**](https://sli.dev/guide/syntax.html#latex) - Built-in LaTeX math equations support
+- 📰 [**Diagrams**](https://sli.dev/guide/syntax.html#diagrams) - Creates diagrams with textual descriptions 
 - 🌟 [**Icons**](https://sli.dev/guide/syntax.html#icons) - Access to icons from any iconset directly
 - 💻 [**Editors**](https://sli.dev/guide/editors.html) - Integrated editor, or [extension for VS Code](https://github.com/slidevjs/slidev-vscode)
 - 🎥 [**Recording**](https://sli.dev/guide/recording.html) - built-in recording and camera view
@@ -84,6 +85,7 @@ For a full example, you can check the [demo](https://github.com/slidevjs/slidev/
 - [VueUse](https://vueuse.org) family -  [`@vueuse/core`](https://github.com/vueuse/vueuse), [`@vueuse/head`](https://github.com/vueuse/head), [`@vueuse/motion`](https://github.com/vueuse/motion), etc.
 - [Iconify](https://iconify.design/) - Iconsets collection.
 - [KaTeX](https://katex.org/) - LaTeX math rendering.
+- [Mermaid](https://mermaid-js.github.io/mermaid) - Textual Diagrams.
 
 ## Sponsors
 

docs/guide/index.md

@@ -16,7 +16,8 @@ You can learn more about the rationale behind the project in the [Why Slidev](/g
 - 🌈 [**Stylish**](/guide/syntax.html#embedded-styles) - [Windi CSS](https://windicss.org/) on-demand utilities, easy-to-use embedded stylesheets
 - 🤹 [**Interactive**](/custom/directory-structure.html#components) - embedding Vue components seamlessly
 - 🎙 [**Presenter Mode**](/guide/presenter-mode.html) - use another window, or even your phone to control your slides
-- 🧮 [**LaTeX**](https://sli.dev/demo/starter/6) - Built-in LaTeX math equations support
+- 🧮 [**LaTeX**](/guide/syntax.html#latex) - Built-in LaTeX math equations support
+- 📰 [**Diagrams**](/guide/syntax.html#diagrams) - Creates diagrams with textual descriptions 
 - 🌟 [**Icons**](/guide/syntax.html#icons) - Access to icons from any iconset directly
 - 💻 [**Editors**](/guide/editors.html) - Integrated editor, or [extension for VS Code](https://github.com/slidevjs/slidev-vscode)
 - 🎥 [**Recording**](/guide/recording.html) - built-in recording and camera view
@@ -36,6 +37,7 @@ Slidev is made possible by combining these tools and technologies.
 - [VueUse](https://vueuse.org) family -  [`@vueuse/core`](https://github.com/vueuse/vueuse), [`@vueuse/head`](https://github.com/vueuse/head), [`@vueuse/motion`](https://github.com/vueuse/motion), etc.
 - [Iconify](https://iconify.design/) - Iconsets collection.
 - [KaTeX](https://katex.org/) - LaTeX math rendering.
+- [Mermaid](https://mermaid-js.github.io/mermaid) - Textual Diagrams.
 
 ### Scaffolding Your First Presentation
 

docs/guide/syntax.md

@@ -259,4 +259,31 @@ $$
 $$
 ```
 
-Learn more: [Demo](https://sli.dev/demo/starter/6) | [KaTeX](https://katex.org/) | [`markdown-it-katex`](https://github.com/waylonflinn/markdown-it-katex).
+Learn more: [Demo](https://sli.dev/demo/starter/7) | [KaTeX](https://katex.org/) | [`markdown-it-katex`](https://github.com/waylonflinn/markdown-it-katex)
+
+## Diagrams
+
+You can also create diagrams / graphs from textual descriptions in your Markdown, powered by [Mermaid](https://mermaid-js.github.io/mermaid).
+
+Code blocks marked as `mermaid` will be converted to digrams, for example:
+
+~~~md
+//```mermaid
+sequenceDiagram
+  Alice->John: Hello John, how are you?
+  Note over Alice,John: A typical interaction
+//```
+~~~
+
+You can further pass an options object to it to specify the scaling and theming. The syntax of the object is a JavaScript object literal, you will need to add quotes (`'`) for strings and use comma (`,`) between keys.
+
+~~~md
+//```mermaid {theme: 'neutral', scale: 0.8}
+graph TD
+B[Text] --> C{Decision}
+C -->|One| D[Result 1]
+C -->|Two| E[Result 2]
+//```
+~~~
+
+Learn more: [Demo](https://sli.dev/demo/starter/8) | [Mermaid](https://mermaid-js.github.io/mermaid)

package.json

@@ -42,6 +42,7 @@
     "@types/jest": "^26.0.23",
     "@types/js-yaml": "^4.0.1",
     "@types/markdown-it": "^12.0.1",
+    "@types/mermaid": "^8.2.5",
     "@types/node": "^15.0.2",
     "@types/prettier": "^2.2.3",
     "@types/prismjs": "^1.16.5",

packages/client/builtin/Mermaid.vue

@@ -0,0 +1,36 @@
+<!--
+Mermaid
+(auto transformed, you don't need to use this component directly)
+
+Usage:
+
+```mermaid
+pie
+"Dogs" : 386
+"Cats" : 85
+"Rats" : 15
+```
+-->
+
+<script setup lang="ts">
+import { defineProps, computed, getCurrentInstance } from 'vue'
+import { renderMermaid } from '../modules/mermaid'
+
+const props = defineProps({
+  code: {
+    default: '',
+  },
+  scale: {
+    default: 1,
+  },
+})
+
+const vm = getCurrentInstance()
+const html = computed(() => renderMermaid(props.code, vm?.attrs || {}))
+</script>
+
+<template>
+  <Transform :scale="scale">
+    <div v-html="html"></div>
+  </Transform>
+</template>

packages/client/main.ts

@@ -14,6 +14,8 @@ import './styles/code.css'
 import 'virtual:windi-utilities.css'
 import 'virtual:windi-devtools'
 
+/* __body__ */
+
 const app = createApp(App)
 app.use(router)
 app.use(createHead())

packages/client/modules/mermaid.ts

@@ -0,0 +1,27 @@
+// @ts-ignore
+import mermaid from 'mermaid/dist/mermaid.min'
+import { customAlphabet } from 'nanoid'
+import { decode } from 'js-base64'
+
+mermaid.startOnLoad = false
+mermaid.initialize({ startOnLoad: false })
+
+const nanoid = customAlphabet('abcedfghicklmn', 10)
+const cache = new Map<string, string>()
+
+export function renderMermaid(encoded: string, options: any) {
+  const _cache = cache.get(encoded)
+  if (_cache)
+    return _cache
+
+  mermaid.initialize({
+    startOnLoad: false,
+    theme: 'forest',
+    ...options,
+  })
+  const code = decode(encoded)
+  const id = nanoid()
+  const svg = mermaid.render(id, code)
+  cache.set(encoded, svg)
+  return svg
+}

packages/create-app/template/slides.md

@@ -151,6 +151,39 @@ Check out [the guides](https://sli.dev/custom/#components) for more.
 </div>
 </div>
 
+
+---
+class: px-20
+---
+
+# Themes
+
+Slidev comes with powerful theming support. Themes are able to provide styles, layouts, components, or even configurations for tools. Switching between themes by just **one edit** in your frontmatter:
+
+<div grid="~ cols-2 gap-2" m="-t-2">
+
+```yaml
+---
+theme: default
+---
+```
+
+```yaml
+---
+theme: seriph
+---
+```
+
+<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-default/01.png?raw=true">
+
+<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-seriph/01.png?raw=true">
+
+</div>
+
+Read more about [How to use a theme](https://sli.dev/themes/use.html) and
+check out the [Awesome Themes Gallery](https://sli.dev/themes/gallery.html).
+
+
 ---
 
 # LaTeX
@@ -179,37 +212,30 @@ $$
 
 [Learn more](https://sli.dev/guide/syntax#latex)
 
----
-class: px-20
 ---
 
-# Themes
+# Diagrams
 
-Slidev comes with powerful theming support. Themes are able to provide styles, layouts, components, or even configurations for tools. Switching between themes by just **one edit** in your frontmatter:
+You can create diagrams / graphs from textual descriptions, directly in your Markdown.
 
-<div grid="~ cols-2 gap-2" m="-t-2">
+<div class="grid grid-cols-2 gap-4 pt-4 -mb-6">
 
-```yaml
----
-theme: default
----
+```mermaid {scale: 0.9}
+sequenceDiagram
+    Alice->John: Hello John, how are you?
+    Note over Alice,John: A typical interaction
 ```
 
-```yaml
----
-theme: seriph
----
+```mermaid {theme: 'neutral', scale: 0.8}
+graph TD
+B[Text] --> C{Decision}
+C -->|One| D[Result 1]
+C -->|Two| E[Result 2]
 ```
 
-<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-default/01.png?raw=true">
-
-<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-seriph/01.png?raw=true">
-
 </div>
 
-Read more about [How to use a theme](https://sli.dev/themes/use.html) and
-check out the [Awesome Themes Gallery](https://sli.dev/themes/gallery.html).
-
+Learn more about [the syntax](https://sli.dev/guide/syntax.html#diagrams)
 
 ---
 layout: center

packages/parser/src/core.ts

@@ -59,6 +59,7 @@ export function detectFeatures(code: string) {
     katex: !!code.match(/\$.*?\$/) || !!code.match(/$\$\$/),
     monaco: !!code.match(/{monaco.*}/),
     tweet: !!code.match(/<Tweet\b/),
+    mermaid: !!code.match(/^```mermaid/m),
   }
 }
 

packages/slidev/node/plugins/entry.ts

@@ -14,6 +14,7 @@ export function createEntryPlugin({ clientRoot, themeRoots, userRoot }: Resolved
     async transform(code, id) {
       if (id === mainEntry) {
         const imports: string[] = []
+        const body: string[] = []
 
         async function scanStyle(root: string) {
           const styles = [
@@ -40,6 +41,7 @@ export function createEntryPlugin({ clientRoot, themeRoots, userRoot }: Resolved
           await scanStyle(root)
 
         code = code.replace('/* __imports__ */', imports.join('\n'))
+        code = code.replace('/* __body__ */', body.join('\n'))
         return code
       }