npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

markdown-it-graphviz

v1.1.2

Published

markdown-it-graphviz 是由哎呦迪奥编写的基于graphviz在web页面中生成各种图形的Markdown-IT扩展插件,种类繁多,我主要是用来生成思维导图,非常方便使用。

Downloads

175

Readme

markdown-it-graphviz(基于 markdown-it 的 graphviz 扩展)

nodejs>8.0 npm>6.0 markdown_it_graphviz aiyou-bud


markdown-it-graphviz 是什么鬼?

markdown-it-graphviz 是由哎呦迪奥编写的基于 graphviz 在 web 页面中生成各种图形的Markdown-IT扩展插件,种类繁多,我主要是用来生成思维导图,非常方便使用。

  • ✂️ 轻量:在不依赖 graphviz 和修改后的 viz.js 的基础上,只有 2kb。mermaid 其实也差不多,不管它。
  • ⚡ 易用:你怎么使用 markdown-it 的插件,就怎么使用它。
  • ⚙️️ 简单: 虽然有两种使用方式,但非常简单,以使用 markdown-it 插件的方式来使用它。

| nodejs | npm | size | | ------ | ----- | ---- | | > 8.0 | > 6.0 | 2kb |

🔥 功能列表

markdown-it-graphviz 插件,将 graphviz 语法转换成各种图形,也算功能强大。 graphviz 有很多种图的(流程图、时序图、思维导图、行为图等等等),你可以去graphviz官网看哟。 也许官网上看到的不太直观,你可以去网上搜索,然后学习,也可以参考我从网上搜索到的几篇文章。

关于Graphviz语法代码高亮,可以在VS Code的扩展中安装插件,直接搜索 Graphviz,然后装装装,最后看看插件的使用教程。


✨ 使用介绍

⚔️ 安装指南

作为第三方依赖安装:

    npm install -S markdown-it-graphviz

📈 使用方法


局部使用(作为第三方依赖包来使用),在 node 环境下的 js 文件中复制以下代码进行粘贴:

import markdownIt from 'markdown-it';
import markdownItGraphviz from 'markdown-it-graphviz';

// #region commonjs方式 Code Module

// const markdownItGraphviz = require('markdown-it-graphviz');

// #endregion commonjs方式 Code Module End

const mdi = markdownIt();
mdi.use(markdownItGraphviz);
mdi.render(`\`\`\`graphviz
digraph g {
	rankdir=LR  //方向左右
	dot语言->{简介,语法,示例}
	dot语言[shape=box,fontcolor=red]
	简介[color=red]
	语法[color=green]
	示例[color=blue]
	简介->{开源免费,UML绘图,导出svg}
	语法->{"digraph","graph"}
	"digraph"->导向图[label=可以制作带方向的导图]
	"graph"->无向图[label=可以制作不带方向的导图]
}
\`\`\``);

😎 效果

思维导图


🚀 快速上手

安装->使用

markdown-it 系列的插件怎么使用的,markdown-it-graphviz 就怎么使用。

可以参照我在维护的这个网站效果噢 我的网站

📚 开发文档

安装node后,使用命令 npm start ,打开浏览器, 输入地址 http://localhost:8989/index.html 或者 http://127.0.0.1:8989 就可以看到效果了,markdown源文件是 sample.md,页面中展示的效果根据这个markdown文件来进行展示的。

代码仓库

github 链接

📞 社区交流

markdown-it-graphviz 也算是哎呦系列中一员,虽然它没有以aiyou开头,之后还会有其它的成员陆续上来。

加群交流:722703370 qq群

感谢以下开源项目

  • viz.js