{"analyzedAt":"2022-07-08T12:44:00.490Z","collected":{"metadata":{"name":"markdown-it-graphviz","scope":"unscoped","version":"1.1.2","description":"markdown-it-graphviz 是由哎呦迪奥编写的基于graphviz在web页面中生成各种图形的Markdown-IT扩展插件，种类繁多，我主要是用来生成思维导图，非常方便使用。","keywords":["markdown","graphviz","markdown-it","viz","graph","web","markdown-it-graphviz","aiyou"],"date":"2020-03-09T00:26:07.315Z","author":{"name":"哎哟迪奥"},"publisher":{"username":"aiyoudiao","email":"newdiao@163.com"},"maintainers":[{"username":"aiyoudiao","email":"newdiao@163.com"}],"repository":{"type":"git","url":"git+https://github.com/aiyoudiao/markdown-it-graphviz.git"},"links":{"npm":"https://www.npmjs.com/package/markdown-it-graphviz","homepage":"https://github.com/aiyoudiao/markdown-it-graphviz#readme","repository":"https://github.com/aiyoudiao/markdown-it-graphviz","bugs":"https://github.com/aiyoudiao/markdown-it-graphviz/issues"},"license":"MPL-2.0","devDependencies":{"@commitlint/cli":"^8.2.0","@commitlint/config-conventional":"^8.2.0","@types/jest":"^24.0.23","autoprefixer":"^9.4.2","babel-core":"^6.26.3","babel-eslint":"^10.0.3","babel-jest":"^24.9.0","babel-loader":"^7.1.5","babel-plugin-lodash":"^3.3.4","babel-plugin-transform-decorators-legacy":"^1.3.5","babel-plugin-transform-runtime":"^6.23.0","babel-preset-env":"^1.7.0","child-process-promise":"^2.2.1","colors":"^1.4.0","commitizen":"^4.0.3","commitlint":"^8.2.0","conventional-changelog-cli":"^2.0.28","copy-webpack-plugin":"^5.1.1","coveralls":"^3.0.6","cross-env":"^6.0.3","cz-conventional-changelog":"^3.0.2","eslint":"^6.7.2","eslint-config-standard":"^14.1.0","eslint-friendly-formatter":"^4.0.1","eslint-loader":"^3.0.3","eslint-plugin-html":"^6.0.0","eslint-plugin-import":"^2.14.0","eslint-plugin-node":"^10.0.0","eslint-plugin-promise":"^4.0.1","eslint-plugin-standard":"^4.0.0","exec":"^0.2.1","glob-all":"^3.1.0","http-server":"^0.12.1","husky":"^3.0.9","imports-loader":"^0.8.0","jest":"^24.9.0","jest-config":"^24.9.0","lint-staged":"^9.4.1","nprogress":"^0.2.0","postcss":"^7.0.6","postcss-cssnext":"^3.1.0","postcss-loader":"^3.0.0","postcss-sprites":"^4.2.1","pre-commit":"^1.2.2","prompt":"^1.0.0","regenerator-runtime":"^0.13.3","semantic-release":"^15.13.24","supertest":"^4.0.2","ts-jest":"^24.1.0","ts-loader":"^6.2.0","ts-node":"^8.4.1","tslint":"^5.20.0","tslint-config-prettier":"^1.18.0","tslint-config-standard":"^9.0.0","tslint-loader":"^3.5.4","typescript":"^3.7.3","typescript-babel-jest":"^1.0.6","url-loader":"^1.1.2","vue-cli-plugin-commitlint":"^1.0.10"},"releases":[{"from":"2022-06-08T00:00:00.000Z","to":"2022-07-08T00:00:00.000Z","count":0},{"from":"2022-04-09T00:00:00.000Z","to":"2022-07-08T00:00:00.000Z","count":1},{"from":"2022-01-09T00:00:00.000Z","to":"2022-07-08T00:00:00.000Z","count":1},{"from":"2021-07-08T00:00:00.000Z","to":"2022-07-08T00:00:00.000Z","count":1},{"from":"2020-07-08T00:00:00.000Z","to":"2022-07-08T00:00:00.000Z","count":1}],"hasTestScript":true,"readme":"<p align=\"center\">\r\n    <img src=\"./sources/logo.png\" alt=\"Image\" width=\"320\" height=\"304\"/>\r\n</p>\r\n\r\n# markdown-it-graphviz（基于 markdown-it 的 graphviz 扩展）\r\n\r\n![nodejs>8.0](https://img.shields.io/badge/nodejs-%3E%208.0-brightgreen.svg?id=markdown-it-graphviz)\r\n![npm>6.0](https://img.shields.io/badge/npm-%20%3E%206.0-brightgreen.svg?id=markdown-it-graphviz)\r\n![markdown_it_graphviz](https://img.shields.io/badge/markdown_it_graphviz-1.0.0-brightgreen.svg?id=markdown-it-graphviz)\r\n![aiyou-bud](https://img.shields.io/badge/aiyou-bud-brightgreen.svg?id=markdown-it-graphviz)\r\n\r\n- [🔥 功能列表](#功能列表)\r\n- [✨ 使用介绍](#使用介绍)\r\n- [🚀 快速上手](#快速上手)\r\n- [📚 开发文档](#开发文档)\r\n- [📞 社区交流](#社区交流)\r\n\r\n---\r\n\r\n## markdown-it-graphviz 是什么鬼？\r\n\r\nmarkdown-it-graphviz 是由哎呦迪奥编写的基于 graphviz 在 web 页面中生成各种图形的**Markdown-IT**扩展插件，种类繁多，我主要是用来生成思维导图，非常方便使用。\r\n\r\n- ✂️ 轻量：在不依赖 graphviz 和修改后的 viz.js 的基础上，只有 2kb。mermaid 其实也差不多，不管它。\r\n- ⚡ 易用：你怎么使用 markdown-it 的插件，就怎么使用它。\r\n- ⚙️️ 简单: 虽然有两种使用方式，但非常简单，以使用 markdown-it 插件的方式来使用它。\r\n\r\n| nodejs | npm   | size |\r\n| ------ | ----- | ---- |\r\n| > 8.0  | > 6.0 | 2kb  |\r\n\r\n## 🔥 功能列表\r\n\r\nmarkdown-it-graphviz 插件，将 graphviz 语法转换成各种图形，也算功能强大。\r\ngraphviz 有很多种图的（流程图、时序图、思维导图、行为图等等等），你可以去[graphviz官网](http://www.graphviz.org/documentation/)看哟。\r\n也许官网上看到的不太直观，你可以去网上搜索，然后学习，也可以参考我从网上搜索到的几篇文章。\r\n\r\n- [graphviz的基本语法及使用](https://blog.csdn.net/mouday/article/details/80902992?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task)\r\n- [Graphviz 画图的一些总结](https://www.cnblogs.com/shuqin/p/11897207.html)\r\n- [Graphviz](https://www.jianshu.com/p/79f1a4acd2f2)\r\n\r\n关于Graphviz语法代码高亮，可以在VS Code的扩展中安装插件，直接搜索 Graphviz，然后装装装，最后看看插件的使用教程。\r\n\r\n---\r\n\r\n## ✨ 使用介绍\r\n\r\n### ⚔️ 安装指南\r\n\r\n作为第三方依赖安装：\r\n\r\n```bash\r\n    npm install -S markdown-it-graphviz\r\n```\r\n\r\n### 📈 使用方法\r\n\r\n---\r\n\r\n局部使用（作为第三方依赖包来使用），在 node 环境下的 js 文件中复制以下代码进行粘贴：\r\n\r\n```javascript\r\nimport markdownIt from 'markdown-it';\r\nimport markdownItGraphviz from 'markdown-it-graphviz';\r\n\r\n// #region commonjs方式 Code Module\r\n\r\n// const markdownItGraphviz = require('markdown-it-graphviz');\r\n\r\n// #endregion commonjs方式 Code Module End\r\n\r\nconst mdi = markdownIt();\r\nmdi.use(markdownItGraphviz);\r\nmdi.render(`\\`\\`\\`graphviz\r\ndigraph g {\r\n\trankdir=LR  //方向左右\r\n\tdot语言->{简介,语法,示例}\r\n\tdot语言[shape=box,fontcolor=red]\r\n\t简介[color=red]\r\n\t语法[color=green]\r\n\t示例[color=blue]\r\n\t简介->{开源免费,UML绘图,导出svg}\r\n\t语法->{\"digraph\",\"graph\"}\r\n\t\"digraph\"->导向图[label=可以制作带方向的导图]\r\n\t\"graph\"->无向图[label=可以制作不带方向的导图]\r\n}\r\n\\`\\`\\``);\r\n```\r\n\r\n---\r\n\r\n### 😎 效果\r\n\r\n![思维导图](./sources/20200308071434.png)\r\n\r\n\r\n---\r\n\r\n## 🚀 快速上手\r\n\r\n**安装**->**使用**\r\n\r\nmarkdown-it 系列的插件怎么使用的，markdown-it-graphviz 就怎么使用。\r\n\r\n可以参照我在维护的这个网站效果噢 [我的网站](http://www.hao6.website:1000/#graphviz-%E6%80%9D%E7%BB%B4%E5%AF%BC%E5%9B%BE)\r\n\r\n## 📚 开发文档\r\n\r\n安装node后，使用命令 **npm start** ，打开浏览器，\r\n输入地址 http://localhost:8989/index.html 或者 http://127.0.0.1:8989\r\n就可以看到效果了，markdown源文件是 sample.md，页面中展示的效果根据这个markdown文件来进行展示的。\r\n\r\n\r\n## 代码仓库\r\n\r\n[github 链接](https://github.com/aiyoudiao/markdown-it-graphviz)\r\n\r\n## 📞 社区交流\r\n\r\nmarkdown-it-graphviz 也算是**哎呦系列**中一员，虽然它没有以aiyou开头，之后还会有其它的成员陆续上来。\r\n\r\n加群交流：722703370\r\n![qq群](./sources/20200228230627.png)\r\n\r\n### 感谢以下开源项目\r\n\r\n- viz.js"},"npm":{"downloads":[{"from":"2022-07-07T00:00:00.000Z","to":"2022-07-08T00:00:00.000Z","count":15},{"from":"2022-07-01T00:00:00.000Z","to":"2022-07-08T00:00:00.000Z","count":24},{"from":"2022-06-08T00:00:00.000Z","to":"2022-07-08T00:00:00.000Z","count":82},{"from":"2022-04-09T00:00:00.000Z","to":"2022-07-08T00:00:00.000Z","count":206},{"from":"2022-01-09T00:00:00.000Z","to":"2022-07-08T00:00:00.000Z","count":405},{"from":"2021-07-08T00:00:00.000Z","to":"2022-07-08T00:00:00.000Z","count":678}],"starsCount":0},"github":{"starsCount":4,"forksCount":4,"subscribersCount":1,"issues":{"count":3,"openCount":3,"distribution":{"3600":0,"10800":0,"32400":0,"97200":0,"291600":0,"874800":0,"2624400":0,"7873200":0,"23619600":0,"70858800":3,"212576400":0},"isDisabled":false},"contributors":[{"username":"aiyoudiao","commitsCount":7}],"commits":[{"from":"2022-07-01T00:00:00.000Z","to":"2022-07-08T00:00:00.000Z","count":0},{"from":"2022-06-08T00:00:00.000Z","to":"2022-07-08T00:00:00.000Z","count":0},{"from":"2022-04-09T00:00:00.000Z","to":"2022-07-08T00:00:00.000Z","count":0},{"from":"2022-01-09T00:00:00.000Z","to":"2022-07-08T00:00:00.000Z","count":0},{"from":"2021-07-08T00:00:00.000Z","to":"2022-07-08T00:00:00.000Z","count":0}]},"source":{"files":{"readmeSize":4340,"testsSize":3778592,"hasChangelog":true},"linters":["eslint","jshint","prettier","tslint"]}},"evaluation":{"quality":{"carefulness":0.9199999999999999,"tests":0.6,"health":1,"branding":0},"popularity":{"communityInterest":10,"downloadsCount":68.66666666666667,"downloadsAcceleration":0.31706621004566216,"dependentsCount":0},"maintenance":{"releasesFrequency":0.9,"commitsFrequency":0.9,"openIssues":0.9,"issuesDistribution":0.9}},"score":{"final":0.6159687479317749,"detail":{"quality":0.8364556389013833,"popularity":0.0430678982176456,"maintenance":0.9998808339576686}}}