`
JerryWang_SAP
  • 浏览: 1025370 次
  • 性别: Icon_minigender_1
  • 来自: 成都
文章分类
社区版块
存档分类
最新评论

一个用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的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:

 
 
0
0
分享到:
评论

相关推荐

    js脑图思维导图插件.zip

    作为一个JavaScript库,它可以无缝地融入到任何Web项目中,无论你是前端开发者还是网页设计师,都可以轻松地将其整合进自己的项目。通过简单的API调用,你可以快速创建、编辑和展示思维导图,极大地提升了开发效率。...

    思维导图插件

    使用JavaScript思维导图插件的益处: 1. **易用性**:用户可以通过简单的拖放操作添加、删除和重新排列节点,使得思维导图的创建直观且快速。 2. **实时协作**:在Web应用中集成后,多人可以同时编辑同一张思维导图...

    javascript思维导图

    javascript思维导图 基础知识点 用于巩固基础 javascript思维导图 基础知识点 用于巩固基础javascript思维导图 基础知识点 用于巩固基础javascript思维导图 基础知识点 用于巩固基础

    vym思维导图工具用户手册

    - **地图部分添加**:可以从一个思维导图复制部分结构到另一个思维导图中,便于共享和重用。 #### 四、跨平台支持与技术细节 - **macOS支持**:针对macOS操作系统进行了优化,支持特定的功能和快捷键。 - **命令行...

    JavaScript思维导图

    JavaScript,作为全球最广泛...JavaScript思维导图作为一个有效的学习工具,可以帮助初学者梳理这些概念,提升学习效率。在实际开发过程中,不断实践和探索,将理论知识转化为实际技能,才能真正成为JavaScript的大师。

    思维导图 github使用笔记.pdf

    总结归纳了我使用Github的一些经验

    Joplin 思维导图插件 Kity Minder Mindmap Tools Plugin v1.0.2

    下载最新版本的 com.sctmes.kity-minder.jpl 和 com.sctmes.kity-minder.json 文件,并放入同一个文件夹 2 打开Joplin的 “工具\选项\插件” 菜单,点击 “管理你的插件”,选择 “从文件安装”,选择对应的 ...

    通过编写缩进列表来制作思维导图的在线工具

    根据压缩包子文件的文件名称列表“text2mindmap-master”,我们可以推测这是一个名为“text2mindmap”的项目,而且很可能是一个GitHub仓库的克隆。"master"分支通常是GitHub上默认的主要分支,包含了项目最新的稳定...

    Java多线程思维导图

    Java的思维导图模型,自己上课和下课的总结,不喜勿喷

    python核心知识(思维导图)

    本文主要涵盖了 Python 编程的核心知识(暂不包括标准库及第三方库,...接着,结合这些思维导图主要参考的资料,分享一下我的学习体验,一方面可供初学者参考,另一方面,也便于大家结合思维导图深入学习、理解、思考;

    GitHub思维导图学习.zip

    博客《GitHub思维导图学习(图里知多少,点进来看看?)》中提供的GitHub学习思维导图(内涵.pnd、.pdf、.xmind文件)

    Github基本知识思维导图.xmind

    Github基本知识思维导图.xmind

    开源免费思维导图工具 BlinkMind 0.1.6 中文多语免费版.zip

    支持将一个主题拖放到另一个主题以重新组织思维导图。 打开并保存文件 保存并打开 .bmind 文件,双击文件即可打开。 将主题导出到图像 将主题导出到 png/jpg/svg。 将图像插入主题 每个主题都可以插入无限个图像...

    github_repo_matlab_

    标题 "github_repo_matlab_" 暗示这是一个与 MATLAB 相关的 GitHub 仓库,可能包含了一些 MATLAB 代码或工具。描述中的 "thank you tahnk you sorry very much" 是一种表达感谢的方式,可能意味着作者对贡献者或者...

    Python编程(思维导图)(1).zip

    在这个"Python编程(思维导图)(1).zip"压缩包中,包含了"入学视频.MP4"和"Python编程(思维导图)"两个文件,它们旨在为初学者提供一个全面的学习框架。 1. **Python编程基础**: - 变量与数据类型:Python支持...

    git知识点思维导图

    git知识点思维导图,更全面的git知识结构,让你快速全面了解和学习git工具! xmind源文件,可修改编辑

    思维导图工具my-mind.zip

    My Mind 是一个基于 Web 的思维导图绘制工具,免费而且完全开源。My Mind 大多数采用键盘进行操作。 在线演示:http://my-mind.github.io/ 标签:mymind

    git常用命令总结,思维导图

    git常用命令总结 git命令思维导图

    linux-使用repo管理github项目例子

    使用repo管理github项目例子

    github_repo.zip

    在matlab中的sklearn工具箱

Global site tag (gtag.js) - Google Analytics