32 Unstar Star 131 Fork 24

玄子科技 / 玄子思维导图

Create your Gitee Account
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
Clone or download
README.md 6.64 KB
Copy Edit Web IDE Raw Blame History
小玄子 authored 2020-03-20 14:06 . build v7 add native js api

玄子思维导图

玄子思维导图

应用简介

国产开源开箱即用的在线思维导图笔记应用。

使用方法

主要特性

  • 支持在Markdown中嵌入思维导图;
  • 支持通过文本方便修改思维导图内容;
  • 支持离线和在线管理本机的脑图文档;
  • 支持主流浏览器开箱即用随时随地编写脑图和文档,无需安装下载;
  • 编写的文档可以通过选择-复制,然后粘贴到微信公众号等编辑器中使用;
  • 支持“标准”Markdown / CommonMark和Github风格的语法,也可变身为代码编辑器;
  • 支持实时预览、图片(跨域)上传、预格式文本/代码/表格插入、代码折叠、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能;
  • 支持ToC(Table of Contents)、Emoji表情、Task lists、@链接等Markdown扩展语法;
  • 支持TeX科学公式(基于KaTeX)、流程图 Flowchart 和 时序图 Sequence Diagram;

v0.2 新特性

  • 支持通过文本设置脑图节点的字体大小;
  • 支持通过文本设置脑图节点字体颜色和背景颜色
  • 支持渲染指定文本为二维码;

v0.7 新特性

  • 添加作为编辑器独立使用的接口

第三方开发接口

  • 使用说明 在js上下文中配置 window.XZMindEditorConfig 参数即可独立使用MD脑图编辑器,无需通过文件管理创建文件。 可以添加文件保存时的事件,来接收编辑器保存的正文内容。
  • JavaScript接口样例
			var editorConfig = {
				title:"title",
  	 			path:"/test/path",	//显示地址
  	 			markdown:"编辑器显示文本",		//编辑器显示文本
  	 			onSave:function(markdown){
  	 				//用户点击保存按钮执行的方法
  	 				console.log('save markdown '+markdown);
  	 			}
  	 	}; 
  	 	window.XZMindEditorConfig = editorConfig;
  • 接口例子 在项目的wars文件夹下,打开index-editor.html即可查看样例,点击打开 独立编辑样例

使用技巧

设置节点颜色演示

	```mind
	思维导图字体颜色演示
		 . 说话的艺术
			#FF00ff 1.警告的话
			#44ff00 2. 温馨的话
			#229933 3. 关怀的话
			#ff3300 4. 强硬的话
		. 背景颜色
			##ff00ff 高兴的事情
			##ff9900 不开心的事
			##00ff88 悠闲的时光
		第三项 : 样例节点
	``` 

渲染效果

sample-1

设置节点字体大小

	```mind
	思维导图字体演示
		 ## 重要事项
			# 1.特别重要事项
			## 2. 也很重要的事
			### 3. 需要注意的事情
			#### 4. 留意的事情
		第二项 : 样例节点
		第三项 : 样例节点
	``` 

渲染效果 sample-1

嵌入二维码

	```qrcode
	二维码码内容,链接 https://xuanzi.ltd
	```

嵌入思维导图1

     ```mind
        :逻辑图
        样例 : 在MD文档中插入思维导图
        	第一项 : 样例节点
        		子节点
        		子节点
        	第二项 : 样例节点
        	第三项 : 样例节点
     ```

说明:用TAB键划分节点层次

** 渲染的显示效果 **

sample-1

嵌入思维导图2

说明:用TAB键划分节点层次

     ```mind
        :树杈图
        百科词条:中华人民共和国
        	首都:北京
        		故宫
        		天安门
        		鸟巢
        	面积:960万平方公里
        		陆地面积960万平方公里
        		领海约470万平方公里
        	主要城市
        		天津
        		江城:武汉
        		成都
        		花城:广州
        	主要节日:春节\n元宵节\n清明节\n端午节\n中秋节
        	---文化思想
        		诸子百家
        		汉服文化
        		唐诗宋词
     ```

** 渲染的显示效果 **

sample-2

常用技巧

  • 支持MD语法输入,例如以下示例创建一幅简单的思维导图:
   ```mind
       :逻辑图
       样例 : 在MD文档中插入思维导图
       	第一项 : 样例节点
       		子节点
       		子节点
       	第二项 : 样例节点
       	第三项 : 样例节点
   ````
  • 思维导图每一个节点已换行分隔,节点级别已TAB键符为层次划分,下级比上级多一个TAB键符。

内置浏览器的文件管理

  • 可以按分类创建文件夹和文件。
  • 所有文件存储在浏览器内部。

界面预览

  • 文件管理器

light night

  • 编辑器

sample-2

联系方式

主要使用到的开源项目

项目未来路线图

  • 支持更多思维导图结构布局
  • 支持导入和导出文档
  • 支持多设备客户端,如PC、安卓、iphone、微信小程序等
  • 支持文件同步

项目编译方法

  • 这是基于GWT插件的项目,请先在eclipse中安装GWT开发插件。
  • 下载本项目的源代码,并导入eclipse项目即可。
  • 编译思维导图渲染和文件管理模块等源码请在以下项目中下载,编译方法同上:
  • XZMindMap
  • IndexedFSView
  • IndexeddbFS
  • Indexeddb_gwt

Comment ( 0 )

Sign in for post a comment

Java
1
https://gitee.com/xuanzi_code/xzmind.git
git@gitee.com:xuanzi_code/xzmind.git
xuanzi_code
xzmind
玄子思维导图
master

Search

132457 8cb2edc1 1899542 131848 70c8d3a4 1899542