0.0.3 • Published 10 months ago
markdown-diagrams v0.0.3
markdown-diagrams
markdown-diagrams is a markdown-it plugin for diagram. It supports mermaid, plantuml. It supports contorls like zoom, move.
Features
- Support PlantUML、Mermaid、Dot、Ditaa syntax;
- Support zoom、move、rough、download、copy origin code and soon contorls;
- Support Shift and mouse wheel to zoom in or out;
- Support modal preview;
- Support long press mouse click to drag the chart
UML examples
Markdown fence identifier：plantuml、mermaid、dot、ditaa
PlantUML
```plantuml
Bob -> Alice : hello
```
DOT
```dot
digraph example1 {
1 -> 2 -> { 4, 5 };
1 -> 3 -> { 6, 7 };
}
```
ditaa
!WARNING On PlantUML, only PNG,TXT generation is supported.
```ditaa +--------+ +-------+ +-------+ | | --+ ditaa +--> | | | Text | +-------+ |diagram| |Document| |!magic!| | | | {d}| | | | | +---+----+ +-------+ +-------+ : ^ | Lots of work | +-------------------------+ ```
mermaid
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
Install
npm install markdown-diagrams --saveUsage
vite.config.ts
import MarkdownItDiagrams from 'markdown-diagrams'
import Markdown from 'unplugin-vue-markdown/vite'
export default defineConfig({
plugins: [
Markdown({
markdownItSetup(md) {
md.use(MarkdownItDiagrams, {
showController: true, // show controller,default:false
/**
* PlantUML options
* ditaa:imageFormat 'png| txt'
* plantuml: imageFormat'png| svg| txt'
* dot: imageFormat'png| svg| txt'
*/
// imageFormat: 'svg', // image format:svg|png|txt,default:svg
// server: '', // plantuml server,default:http://www.plantuml.com/plantuml
// ditaa: {
// imageFormat: 'svg', // image format:png|txt,default:svg
// server: '', // plantuml server,default:http://www.plantuml.com/plantuml
// }
})
}
})
]
})If you open the controller, you need to import the script in the initialization. vue3 example:
<script setup lang="ts">
import { markdownItDiagramDom } from 'markdown-diagrams/dom'
import { onMounted } from 'vue'
onMounted(async () => {
// if you want to use mermaid, you need to install mermaid.js
// npm install mermaid
// import mermaid from 'mermaid'
mermaid.initialize({ startOnLoad: false })
await mermaid.run()
// initialize markdown-diagrams/dom script
await markdownItDiagramDom()
})
</script>