一个用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 colorful

      linkShape: 'diagonal' // or bracket
  });
});

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

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

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

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

node local.js

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

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

相关文章
|
9月前
|
JSON 前端开发 JavaScript
使用 JavaScript Promise 读取 Github 某用户的数据
使用 JavaScript Promise 读取 Github 某用户的数据
77 0
|
10月前
|
JavaScript 前端开发
8张JavaScript思维导图
8张JavaScript思维导图
93 0
|
前端开发 JavaScript IDE
JavaScript-WebStorm中配置Github并将代码托管到Github
JavaScript-WebStorm中配置Github并将代码托管到Github
79 0
|
Web App开发 Rust JavaScript
分享2020年Github星级前20名JavaScript框架性能比较
之前有在《读 2020 年 Javascript 趋势报告展望 ES2020》介绍了主流的前端库,本文就来看看JavaScript框架之间的终极性能之战
747 0
|
JavaScript 前端开发 数据可视化
好消息!GitHub 已原生支持基于 JavaScript 的 Mermaid 图表工具
好消息!GitHub 已原生支持基于 JavaScript 的 Mermaid 图表工具
234 0
|
Shell 开发工具 数据安全/隐私保护
curl快速下载GitHub Repo指定commit的tar.gz
有些时候需要下载GitHub仓库的tar.gz来做一些其他操作; 这时候可能最常见的就是去GitHub上找release或者tag里面有提供tar.gz的资源; 然后点击下载~~ 但是有些场景可能这种操作就不是很方便了,比如给客户打包源码的; 快速指定git的tag或者某个commit_hash , download下来 然后对于源码做一些加密什么的,再给到客户现场构建部署~; 这时候我们就会考虑以脚本来切入,以配置文件的姿势来录入一些参数, 然后快速拿到一些我们需要的资源~ 这里举一个比较单一的场景来开展这篇文章,往下看~
1055 0
|
XML SQL JavaScript
12 个 GitHub 上超火的 JavaScript 奇技淫巧项目,找到写 JavaScript 的灵感!(下)
12 个 GitHub 上超火的 JavaScript 奇技淫巧项目,找到写 JavaScript 的灵感!(下)
188 0
12 个 GitHub 上超火的 JavaScript 奇技淫巧项目,找到写 JavaScript 的灵感!(下)
|
JavaScript 前端开发 API
12 个 GitHub 上超火的 JavaScript 奇技淫巧项目,找到写 JavaScript 的灵感!(上)
12 个 GitHub 上超火的 JavaScript 奇技淫巧项目,找到写 JavaScript 的灵感!(上)
126 0
12 个 GitHub 上超火的 JavaScript 奇技淫巧项目,找到写 JavaScript 的灵感!(上)
|
设计模式 存储 缓存
15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码)
设计模式是一个程序员进阶高级的必备技巧,也是评判一个工程师工作经验和能力的试金石.设计模式是程序员多年工作经验的凝练和总结,能更大限度的优化代码以及对已有代码的合理重构.作为一名合格的前端工程师,学习设计模式是对自己工作经验的另一种方式的总结和反思,也是开发高质量,高可维护性,可扩展性代码的重要手段. 我们所熟知的金典的几大框架,比如jquery, react, vue内部也大量应用了设计模式, 比如观察者模式, 代理模式, 单例模式等.所以作为一个架构师,设计模式是必须掌握的. 在中高级前端工程师的面试的过程中,面试官也会适当考察求职者对设计模式的了解,所以笔者结合多年的工作经验和学习探索,
201 0
|
JavaScript 前端开发
一个用JavaScript生成思维导图(mindmap)的github repo
一个用JavaScript生成思维导图(mindmap)的github repo
167 0
一个用JavaScript生成思维导图(mindmap)的github repo