【掘金者说】Markdown 基于 Mermaid 的时序图、流程图和甘特图

5,416 阅读3分钟

人们常会抱怨:“为什么我有那么多的问题,那么多的痛苦?”答案是,你没有从正确角度看待问题。当你把它看成是一件坏事,它就会变成你的痛苦。你不会碰上无法处理的问题,你碰到每一个问题都是为了让你体会自己拥有的能力,都是为了让你发挥更多的潜能。你的经历都是这么来的。苦难不是人生的挫折,而是人生的存折。

你是否看过一个Pig白皮书文档呢?你现在学的东西,一定会在将来的某个时刻派上用场。一个 Markdown 文本编辑器,推荐工具Typora工具,然后使用让微服排版变Nice渲染复制到博客。然后,掘金者说补充几个常用配置:

  • 文件->导出,可以导出pdf文档,生成的文档可以使用工具推荐SumatraPDF查看
  • 文件->偏好设置->通用,启动选项目:重新打开上次使用的目录
  • 文件->偏好设置->编辑栏,默认缩进,在写纯文字的文章的时候建议开启:对齐缩进
  • 文件->偏好设置->图像,复制图片xx文件夹
  • 文件->偏好设置->Markdown,代码块:显示行号

Mermaid 摘要:
从文本生成图表和流程图的方式与降价类似。

在解释代码时是否曾经想简化文档并避免使用Visio之类的笨重工具?

这就是美人鱼诞生的原因,这是一种类似于markdown的简单脚本语言,用于通过javascript从文本生成图表。

查看美人鱼的集成和用法列表

美人鱼被提名并获得了“最令人兴奋的技术使用”类别的JS开源奖(2019年)!!!感谢所有参与人员,人们提出了请求,人们回答了问题,并特别感谢Tyler Long帮助我维护该项目。

甘特图实验

gantt
    title 平台开发流程
    section 平台确定
        需求分析       :a1, 2020-07-07, 4d
        可行性报告     :after a1, 4d
        概念验证       : 3d
    section 平台研发
        概要设计      :2020-07-17, 4d
        详细设计      :2020-07-21, 5d
        编码          :2020-07-26, 10d
        测试          :2020-08-05, 5d
    section 发布迭代
        发布: 2d
        迭代: 3d

顺序图实验

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

类图

classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label

参考地址:

Typora 完全使用详解

让微服排版变Nice

SumatraPDF

Mermaid

PigX Microservice Architecture系统白皮书

mermaid-js.github.io/mermaid/#/

www.iminho.me/wiki/docs/m…

mermaid-js.github.io/mermaid/#/

github.com/mermaid-js/…