怎么用Markdown画图

  • 原创
  • |
  • 浏览：20167
  • |
  • 更新：
  • 怎么用Markdown画图1
  • 怎么用Markdown画图2
  • 怎么用Markdown画图3
  • 怎么用Markdown画图4
  • 怎么用Markdown画图5
  • 怎么用Markdown画图6
分步阅读

mermaid：以Markdown的方式生成图表和流程框图。

怎么用Markdown画图

工具/原料

  • Haroopad编辑器：http://pan.baidu.com/s/1nv7yHK1
  • mermaid官网：http://knsv.github.io/mermaid/#demos

方法/步骤

  1. 1

    mermaid支持流程图，时序图和甘特图的脚本生成。

    目前部分Markdown编辑器支持mermaid语法。

    怎么用Markdown画图
  2. 2

    我们通过下面的例子一探mermaid的学习成本。

    怎么用Markdown画图
  3. 3

    图表方向，如：

    graph TD，从上至下

    怎么用Markdown画图
  4. 4

    ```mermaid

    graph TD

        client1-->|read / write|SVN((SVN server))

        client2-->|read only|SVN

        client3-->|read / write|SVN

        client4-->|read only|SVN

        client5(...)-->SVN

        SVN---|store the data|sharedrive

    ```

    怎么用Markdown画图
  5. 5

    ```mermaid

    ```

    是markdown语法，表示mermaid代码块。

    SVN((SVN server))——表示这个节点形状是一个圆。

    |read only|SVN——以这种方式添加节点之间的文本。

  6. 6

    ```mermaid

    graph TD

        subgraph SVN Architecture

        client1-->|read / write|SVN((SVN server))

        client2-->|read only|SVN

        client3-->|read / write|SVN

        client4-->|read only|SVN

        client5(...)-->SVN

        SVN---|store the data|sharedrive

        end

    ```

    使用subgraph和end关键字来区分子模块。

    怎么用Markdown画图
  7. 6
    本页面非法爬取自百度经验
  8. 7

    应该说学习成本很低，大家可以通过官网的例子马上就可以使用了。

    END
经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士。
作者声明：本篇经验系本人依照真实经历原创，未经许可，谢绝转载。
展开阅读全部