搭建自己的draw.io

前言

https://www.draw.io 是我个人非常喜欢的一个站点,基本上我大部分的画图都是在draw.io上完成的,可以保存到本地,也可以保存到谷歌/github等。并且图标资源非常的丰富,方便导入图标资源,基本上现有的图标就能满足大部分的需求。因此我个人是非常安利这个站点的!当然,由于国内的因素,draw.io并不是那么容易访问。但是其是一款在github上的开源产品,可以自己搭建本地所需的draw.io。

搭建drawio

draw.io的github地址在https://github.com/jgraph/drawio,可以在release下载正式版本,我们此次下载的是源码版本。

git clone https://github.com/jgraph/drawio.git

编译的话,需要安装ant等环境。

yum install -y ant java-1.8.0-openjdk-devel

接下来,就是需要编译了。

cd etc/build && ant

如果需要生成war包的话,则如下编译

cd etc/build && ant war

编译成功后,war包会生成在drawio/build/draw.war,如果你有tomcat或java的服务环境,可以使用war包部署。整体来说,还是不用war的方便一些,只要有Apache就可以搞定了。

将drawio/war拷贝到www/drawio目录(根据你自己服务器的环境而定)。访问http://xxx.xxx.xxx.xxx/drawio

默认draw.io是强制https的,如果站点没有的话,则可以加上:http://xxx.xxx.xxx.xxx/drawio/index.html?https=0则关闭https,当然,如果你并不打算支持https的话,可以将index.html中的

if (urlParams['demo'] != '1')
{
    var ssl = (urlParams['https'] != null) ? urlParams['https'] == '1' :
        navigator.userAgent.indexOf('MSIE') < 0 || document.documentMode >= 9;
    
    if (ssl && proto != 'https:')
    {
        proto = 'https:';
    }
    else if (!ssl && proto != 'http:')
    {
        proto = 'http:';
    }
}

改成:

if (urlParams['demo'] != '1')
{
    proto = 'http:';
}

看看效果:

非常之不错,支持的图标也很全,本地访问也非常的快!其还支持离线模式,就是在访问的参数上加上offline=1也就是http://xxx.xxx.xxx.xxx/drawio/index.html?offline=1

之前阿里云9块钱搞了个云虚拟空间,拿过来搭建了drawio,可以访问我的域名:

http://www.milupai.com (虚拟主机到期了,因此暂时下线了!)

docker支持

2018年8月18日看了下drawio新的github,新的添加了对docker的支持。

还是需要按上面的步骤,将代码clone下来,如果已经clone过的话,git pull下工程。

cd drawio # 切换到工程源码目录
docker build -t drawio -f etc/docker/Dockerfile . # 执行drawio编译以及生成docker镜像

之后,我们就可以通过docker images -a查看到镜像:

docker images -a
REPOSITORY TAG IMAGE ID CREATED SIZE
drawio latest 1496a474a227 33 minutes ago 723MB

运行drawio容器的话,github上提供的端口号是错误的,默认tomcat已经是监听了8080的端口。因此我们这里做了修订:

docker run -d -p 8080:8080 --restart=always --hostname=drawio --name drawio drawio

但是由于docker镜像并未对中文有做支持,因此部分字体会出现乱码,暂时可以通过访问:http://dl.elkpi.com:8080/draw/ 来访问drawio的程序。后续有时间,我再修订下docker镜像,保证中文没问题!

桌面版本

draw.io目前也提供了桌面版本,也就是离线的版本,对于国内用户来说,桌面版本更加的方便,也放到了github上了:https://github.com/jgraph/drawio-desktop

由于是使用了electron-app技术,因此实现了跨平台的支持,支持windows/MAC/Linux。强烈推荐不是很折腾的,用桌面版本。桌面版本现在唯一的一个缺点就是不支持直接黏贴拷贝到doc文档里面。每次还是需要导出PNG图片再贴图。

转载请注明: 转载自elkPi.com

本文链接地址: 搭建自己的draw.io

3 Comments

  1. liyuhui
    2018年5月21日

    执行了ant war后并没有看到war包生成在目标目录。
    执行ant后,虽然编译显示成功,但是并没有什么变化。
    能看看你编译后的项目吗?我觉得我执行完后,都没有出真正的结果。

    回复
    1. 米鹿π
      2018年5月21日

      我这个很早前搭建的,ant war后,就会有drawio.war,这个war的文件就可以去部署了,现在都用PC客户端了!

      回复
  2. Alsmile
    2019年10月25日

    直接开源的绘图软件:le5le-topology(http://topology.le5le.com/),想怎么定制就怎么定制。

    基于typescript + canvas写的,易集成、方便自定义图形库,支持微服务架构图、流程图、时序图、活动图、类图、动画,可以实现SCADA等。

    详细介绍: https://juejin.im/post/5d6c88726fb9a06b0e54ab35

    回复

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Scroll to top