一个用JavaScript生成思维导图(mindmap)的github repo

github 地址：https://github.com/dundalek/markmap

作者的readme写得很简单。

今天有同事问作者提供的例子到底怎么跑。这里我就写一个更详细的步骤出来。

首先查看example.parse.js的内容：


var fs = require('fs');var parse = require('../parse.markdown');var transform = require('../transform.headings');var text = fs.readFileSync('gtor.md', 'utf-8');var headings = parse(text);var root = transform(headings);console.log(root);fs.writeFileSync('gtor.json', JSON.stringify(root));

使用nodejs命名node example.parse.js执行这段代码：代码读取包含思维导图的本地文件gtor.md, 解析并转换生成本地文件gtor.json.

然后查看example.view.js, 发现作者使用了d3来做UI的渲染。

d3.json("gtor.json", function(error, data) {if (error) throw error;markmap('svg#mindmap', data, {preset: 'default', // or colorfullinkShape: 'diagonal' // or bracket});
});

如果直接双击examples文件夹里的index.html文件在浏览器里打开，会出现跨域错误导致本地文件gtor.json无法访问：

必须把这个example部署到服务器上运行才行。

为了简单起见，我做了一个简单的封装。如果您想跑跑例子看看效果，只需要下载我的project到本地：https://github.com/i042416/jerrylist

直接在本地用nodejs 命令行启动服务器：

node local.js

然后localhost:3000/mindmap即可看到思维导图的效果

要获取更多Jerry的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:

一个用JavaScript生成思维导图(mindmap)的github repo相关推荐

php 生成思维导图,一个用JavaScript生成思维导图(mindmap)的github repo
作者的readme写得很简单. 今天有同事问作者提供的例子到底怎么跑.这里我就写一个更详细的步骤出来. 首先查看example.parse.js的内容: var fs = require('fs'); ...
【MarkDown】CSDN Markdown之思维导图mindmap详解
文章目录思维导图(Mindmap) 一个思维导图的例子语法形状矩形圆角矩形圆形爆炸云朵六边形默认图标和类图标类不清晰的缩进 Markdown字符串与库或网站资源集成思维 ...
xman的思维导图快捷键_一次性入门大纲笔记神器“幕布”，支持一键生成思维导图...
很多人都有记笔记的习惯,我们的老师经常教导我们"上课要记笔记".其实老师说的不做,只不过我们大部分人并没有按照老师的要求去做,或者把老师的要求当做一种"作业"来 ...
【xmind】使用 Java 生成思维导图
点击上方好好学java ,选择星标公众号重磅资讯.干货,第一时间送达今日推荐:你这代码写得真丑,满屏的try-catch,全局异常处理不会吗?个人原创+1博客:点击前往,查看更多前言在日 ...
亿图AI助手一键生成思维导图，捕捉万千灵感，快速出彩！
短短几个月,AIGC(AI-Generated Content)人工智能生成内容,就像一场惊涛骇浪席卷了全球,AIGC会改变人类创作者与工具之间的协作关系,形成新的分工方式. 不久前,亿图软件上线了一 ...
一次性入门大纲笔记神器“幕布”，支持一键生成思维导图
很多人都有记笔记的习惯,我们的老师经常教导我们"上课要记笔记".其实老师说的不做,只不过我们大部分人并没有按照老师的要求去做,或者把老师的要求当做一种"作业"来 ...
一句话生成思维导图，【ProcessOn AI 功能上线】
一句话生成思维导图,[ProcessOn AI 功能上线] AI 思维导图已经越来,让思考和创作更加简单!就像一个新魔法一样,打开了我们的新世界! 只需输入关键词,即可就会生成一张完整的思维导图. P ...
ChatGPT自动化提高工作效率： 2分钟快速生成思维导图
一.简要说明 ChatGPT不止是一个聊天机器人,更是一个自然语言处理.文本内容生成模型,它可以理解语言规则,不仅仅是给你输出已有的知识内容,还会给到你一些创意点子:所以我们应该学会如何使用它,让它更 ...
JavaScript学习思维导图（二）
这是我在学习JavaScript时做的思维导图,用的wps做的思维导图,导出图片,因为不是会员,所以带有水印,仅供参考,谢谢. 1.JavaScript 中的Math,Date,定时器 2.JavaS ...

一个用JavaScript生成思维导图(mindmap)的github repo

一个用JavaScript生成思维导图(mindmap)的github repo相关推荐

最新文章

热门文章