让MWeb支持甘特图的办法(2.0以上版本

  张一帆   09/07/16


开篇一定要注明一下:这个方法只能使用在Mweb2.0以上版本,以下版本不行。原因正文说

Mweb是区禄海(开发者)开发的一款适用于MAC系统的MARKDOWN编辑软件,官网地址在这里官网地址

这款软件在APP store上还是有一定的热度的,我也用了这款软件用来编写自己的博客和工作中应用的各种文案。身为程序员我深表感激,这款软件在我大部分应用情况中都基本上可以解决任何问题。

在工作过程中,我有时候会碰到需要画图的情况。比如,在组织公司项目的时候,需要跟进每一个人的工作进度。这个时候就需要用一种图表的方式进行表达,因为这种表达能够让开发人员以及领导迅速的了解各员工的工作状态。因为我想写gantt图的用法,所以这里就简单讲一下如何应用Mweb来画出gantt图来。

虽然,现在有很多软件都可以用来画图。比如omniPlan。这款软件就可以画出漂亮的gantt图,而且对于整个项目可以涉及到资源的分配,让大型项目进行的有条不紊。但是,如果有小型的需求那么动辄使用omniPlan这些软件就有点大炮打蚊子,大材小用的感觉。

身为IT行业的从业人员,很多时候能用代码解决就不用工具解决,能用手写就不用插件。所以,本着没事找事的态度。想要自己画出甘特图的需求也应运而出。我也属于这一类人,没事就喜欢钻研,碰巧遇到画gantt图的时候在APP store上看到了这款软件,他有个lite版,免费的。可以让你简单感受一下这款软件的魅力。作为想用jekyll做静态博客的我来说,良好的支持了我的需求。所以,我就对这款软件进行了研究。

起先我用的是1.9的版本,这个版本里再偏好设置中是可以进行自定义预览样式的。但是,也许是程序有bug导致按照软件开发者的文章做,是做不出来的。后来,升级到了2.0.9功能才可以实现。我们只需要将这个连接下载以后,打开偏好设置,选择Themes,点击Preview CSS行尾的Edit按钮,在弹出来的finder中将下好的文件夹放入Preview Css文件夹中。点击确定后,再点击Reload,这个时候下来框中就有了刚才你下的文件夹的名称了,选中后关闭偏好设计即可。

下载的文件夹是作者整合了mermaid,echarts,PlantUML功能的样式集合。原理就是用css来渲染gantt的标示。而主要的功劳应该归功于mermaid。我们知道,mermaid是可以支持gantt的渲染的。所以,我们只要在编辑中如此编辑

gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid
        section A section
        Completed task            :done,    des1, 2014-01-06,2014-01-08
        Active task               :active,  des2, 2014-01-09, 3d
        Future task               :         des3, after des2, 5d
        Future task2               :         des4, after des3, 5d
        section Critical tasks
        Completed task in the critical line :crit, done, 2014-01-06,24h
        Implement parser and jison          :crit, done, after des1, 2d
        Create tests for parser             :crit, active, 3d
        Future task in critical line        :crit, 5d
        Create tests for renderer           :2d
        Add to mermaid                      :1d

这样就能形成甘特图了

gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid
        section A section
        Completed task            :done,    des1, 2014-01-06,2014-01-08
        Active task               :active,  des2, 2014-01-09, 3d
        Future task               :         des3, after des2, 5d
        Future task2               :         des4, after des3, 5d
        section Critical tasks
        Completed task in the critical line :crit, done, 2014-01-06,24h
        Implement parser and jison          :crit, done, after des1, 2d
        Create tests for parser             :crit, active, 3d
        Future task in critical line        :crit, 5d
        Create tests for renderer           :2d
        Add to mermaid                      :1d