https://github.com/ryanuo/markdown-it-diagram
markdown-it-diagram is a markdown-it plugin for diagram. It supports mermaid, plantuml. It supports contorls like zoom, move.
https://github.com/ryanuo/markdown-it-diagram
diagram markdown-it markdown-it-diagram move zoom
Last synced: 6 months ago
JSON representation
markdown-it-diagram is a markdown-it plugin for diagram. It supports mermaid, plantuml. It supports contorls like zoom, move.
- Host: GitHub
- URL: https://github.com/ryanuo/markdown-it-diagram
- Owner: ryanuo
- License: mit
- Created: 2024-06-03T11:05:49.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-05T11:36:21.000Z (10 months ago)
- Last Synced: 2025-06-18T04:47:32.948Z (7 months ago)
- Topics: diagram, markdown-it, markdown-it-diagram, move, zoom
- Language: TypeScript
- Homepage: https://ryanuo.cc/posts/md-it-diagarm
- Size: 490 KB
- Stars: 10
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# markdown-it-diagram
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![bundle][bundle-src]][bundle-href]
[![JSDocs][jsdocs-src]][jsdocs-href]
[![License][license-src]][license-href]
markdown-it-diagram is a markdown-it plugin for diagram. It supports mermaid, plantuml. It supports contorls like zoom, move.
## Features
- [x] Support PlantUML、Mermaid、Dot、Ditaa syntax;
- [x] Support zoom、move、rough、download、copy origin code and soon contorls;
- [x] Support Shift and mouse wheel to zoom in or out;
- [x] Support modal preview;
- [x] Support long press mouse click to drag the chart
## UML examples
Markdown fence identifier：[plantuml](https://plantuml.com/)、[mermaid](https://github.com/mermaid-js/mermaid)、[dot](https://graphviz.gitlab.io/doc/info/lang.html)、[ditaa](https://ditaa.sourceforge.net/)
### PlantUML
[online](https://www.plantuml.com/plantuml/uml/)
````markdown
```plantuml
Bob -> Alice : hello
```
````
### DOT
````markdown
```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
````markdown
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
````
## Install
```bash
npm install markdown-it-diagram --save
```
## Usage
vite.config.ts
```ts
import MarkdownItDiagrams from 'markdown-it-diagram'
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:
```vue
import { markdownItDiagramDom } from 'markdown-it-diagram/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-it-diagram/dom script
await markdownItDiagramDom()
})
```
## References
- [markdown-it-textual-uml](https://github.com/manastalukdar/markdown-it-textual-uml)
- [markdown-it](https://github.com/markdown-it/markdown-it)
- [panzoom](https://github.com/timmywil/panzoom)
- [svg2roughjs](https://github.com/fskpf/svg2roughjs)
## License
[MIT](./LICENSE) License © 2023-PRESENT [Ryanuo](https://github.com/ryanuo)
[npm-version-src]: https://img.shields.io/npm/v/markdown-it-diagram?style=flat&colorA=080f12&colorB=1fa669
[npm-version-href]: https://npmjs.com/package/markdown-it-diagram
[npm-downloads-src]: https://img.shields.io/npm/dm/markdown-it-diagram?style=flat&colorA=080f12&colorB=1fa669
[npm-downloads-href]: https://npmjs.com/package/markdown-it-diagram
[bundle-src]: https://img.shields.io/bundlephobia/minzip/markdown-it-diagram?style=flat&colorA=080f12&colorB=1fa669&label=minzip
[bundle-href]: https://bundlephobia.com/result?p=markdown-it-diagram
[license-src]: https://img.shields.io/github/license/ryanuo/markdown-it-diagram.svg?style=flat&colorA=080f12&colorB=1fa669
[license-href]: https://github.com/ryanuo/markdown-it-diagram/blob/main/LICENSE
[jsdocs-src]: https://img.shields.io/badge/jsdocs-reference-080f12?style=flat&colorA=080f12&colorB=1fa669
[jsdocs-href]: https://www.jsdocs.io/package/markdown-it-diagram