{"id":29191292,"url":"https://github.com/ryanuo/markdown-it-diagram","last_synced_at":"2025-07-09T04:34:25.220Z","repository":{"id":242552240,"uuid":"809739454","full_name":"ryanuo/markdown-it-diagram","owner":"ryanuo","description":"markdown-it-diagram is a markdown-it plugin for diagram. It supports mermaid, plantuml. It supports contorls like zoom, move.","archived":false,"fork":false,"pushed_at":"2025-03-05T11:36:21.000Z","size":502,"stargazers_count":10,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-18T04:47:32.948Z","etag":null,"topics":["diagram","markdown-it","markdown-it-diagram","move","zoom"],"latest_commit_sha":null,"homepage":"https://ryanuo.cc/posts/md-it-diagarm","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ryanuo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["ryanuo"],"opencollective":"ryan55"}},"created_at":"2024-06-03T11:05:49.000Z","updated_at":"2025-03-28T12:28:20.000Z","dependencies_parsed_at":"2024-06-11T13:32:57.632Z","dependency_job_id":"eaad60f9-3ac3-452b-8905-7aa33c436c9e","html_url":"https://github.com/ryanuo/markdown-it-diagram","commit_stats":null,"previous_names":["rr210/markdown-it-diagram","ryanuo/markdown-it-diagram"],"tags_count":37,"template":false,"template_full_name":null,"purl":"pkg:github/ryanuo/markdown-it-diagram","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanuo%2Fmarkdown-it-diagram","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanuo%2Fmarkdown-it-diagram/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanuo%2Fmarkdown-it-diagram/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanuo%2Fmarkdown-it-diagram/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryanuo","download_url":"https://codeload.github.com/ryanuo/markdown-it-diagram/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanuo%2Fmarkdown-it-diagram/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263056114,"owners_count":23406807,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["diagram","markdown-it","markdown-it-diagram","move","zoom"],"created_at":"2025-07-02T00:31:09.486Z","updated_at":"2025-07-02T00:33:05.702Z","avatar_url":"https://github.com/ryanuo.png","language":"TypeScript","funding_links":["https://github.com/sponsors/ryanuo","ryan55"],"categories":[],"sub_categories":[],"readme":"# markdown-it-diagram\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![bundle][bundle-src]][bundle-href]\n[![JSDocs][jsdocs-src]][jsdocs-href]\n[![License][license-src]][license-href]\n\nmarkdown-it-diagram is a markdown-it plugin for diagram. It supports mermaid, plantuml. It supports contorls like zoom, move.\n\n## Features\n- [x] Support PlantUML、Mermaid、Dot、Ditaa syntax;\n- [x] Support zoom、move、rough、download、copy origin code and soon contorls;\n- [x] Support Shift and mouse wheel to zoom in or out;\n- [x] Support modal preview;\n- [x] Support long press mouse click to drag the chart\n\n## UML examples\nMarkdown 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/)\n\n### PlantUML\n\n[online](https://www.plantuml.com/plantuml/uml/)\n\n````markdown\n```plantuml\nBob -\u003e Alice : hello\n```\n````\n![plantuml](./assets/plantuml.png)\n\n### DOT\n\n````markdown\n```dot\ndigraph example1 {\n    1 -\u003e 2 -\u003e { 4, 5 };\n    1 -\u003e 3 -\u003e { 6, 7 };\n}\n```\n````\n![dot](./assets/dot.png)\n\n### ditaa\n\u003e [!WARNING]\n\u003e On PlantUML, only PNG,TXT generation is supported.\n````\n```ditaa\n+--------+   +-------+    +-------+\n    |        | --+ ditaa +--\u003e |       |\n    |  Text  |   +-------+    |diagram|\n    |Document|   |!magic!|    |       |\n    |     {d}|   |       |    |       |\n    +---+----+   +-------+    +-------+\n        :                         ^\n        |       Lots of work      |\n        +-------------------------+\n```\n````\n![ditaa](./assets/ditaa.png)\n\n### mermaid\n\n````markdown\n```mermaid\ngraph TD;\n    A--\u003eB;\n    A--\u003eC;\n    B--\u003eD;\n    C--\u003eD;\n```\n````\n![mermaid](./assets/mermaid.png)\n\n## Install\n```bash\nnpm install markdown-it-diagram --save\n```\n## Usage\nvite.config.ts\n```ts\nimport MarkdownItDiagrams from 'markdown-it-diagram'\nimport Markdown from 'unplugin-vue-markdown/vite'\nexport default defineConfig({\n  plugins: [\n    Markdown({\n      markdownItSetup(md) {\n        md.use(MarkdownItDiagrams, {\n          showController: true, // show controller,default:false\n          /**\n           * PlantUML options\n           * ditaa:imageFormat 'png| txt'\n           * plantuml: imageFormat'png| svg| txt'\n           * dot: imageFormat'png| svg| txt'\n           */\n          // imageFormat: 'svg', // image format:svg|png|txt,default:svg\n          // server: '', // plantuml server,default:http://www.plantuml.com/plantuml\n          // ditaa: {\n          // imageFormat: 'svg', // image format:png|txt,default:svg\n          // server: '', // plantuml server,default:http://www.plantuml.com/plantuml\n          // }\n        })\n      }\n    })\n  ]\n})\n```\nIf you open the controller, you need to import the script in the initialization.\nvue3 example:\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { markdownItDiagramDom } from 'markdown-it-diagram/dom'\nimport { onMounted } from 'vue'\nonMounted(async () =\u003e {\n  // if you want to use mermaid, you need to install mermaid.js\n  // npm install mermaid\n  // import mermaid from 'mermaid'\n  mermaid.initialize({ startOnLoad: false })\n  await mermaid.run()\n  // initialize markdown-it-diagram/dom script\n  await markdownItDiagramDom()\n})\n\u003c/script\u003e\n```\n## References\n\n- [markdown-it-textual-uml](https://github.com/manastalukdar/markdown-it-textual-uml)\n- [markdown-it](https://github.com/markdown-it/markdown-it)\n- [panzoom](https://github.com/timmywil/panzoom)\n- [svg2roughjs](https://github.com/fskpf/svg2roughjs)\n\n## License\n\n[MIT](./LICENSE) License © 2023-PRESENT [Ryanuo](https://github.com/ryanuo)\n\n\u003c!-- Badges --\u003e\n\n[npm-version-src]: https://img.shields.io/npm/v/markdown-it-diagram?style=flat\u0026colorA=080f12\u0026colorB=1fa669\n[npm-version-href]: https://npmjs.com/package/markdown-it-diagram\n[npm-downloads-src]: https://img.shields.io/npm/dm/markdown-it-diagram?style=flat\u0026colorA=080f12\u0026colorB=1fa669\n[npm-downloads-href]: https://npmjs.com/package/markdown-it-diagram\n[bundle-src]: https://img.shields.io/bundlephobia/minzip/markdown-it-diagram?style=flat\u0026colorA=080f12\u0026colorB=1fa669\u0026label=minzip\n[bundle-href]: https://bundlephobia.com/result?p=markdown-it-diagram\n[license-src]: https://img.shields.io/github/license/ryanuo/markdown-it-diagram.svg?style=flat\u0026colorA=080f12\u0026colorB=1fa669\n[license-href]: https://github.com/ryanuo/markdown-it-diagram/blob/main/LICENSE\n[jsdocs-src]: https://img.shields.io/badge/jsdocs-reference-080f12?style=flat\u0026colorA=080f12\u0026colorB=1fa669\n[jsdocs-href]: https://www.jsdocs.io/package/markdown-it-diagram\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanuo%2Fmarkdown-it-diagram","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryanuo%2Fmarkdown-it-diagram","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanuo%2Fmarkdown-it-diagram/lists"}