feat: mermaid diagrams support (#71)

* wip: basic mermaid support

* fix: regex for memraid

* feat: support for mermaid

* docs: update docs about diagrams

Author: antfu

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
 

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)