Markdownで人魚の構文でチャートを描く

Pythonデータマイニングとテキスト分析&Stataアプリケーション能力の向上と経験的なフロンティアクラウドトレーニング〜

Mermaidは、Visioよりも軽量で便利なテキストモードでチャートやフローチャートを描画できます。さらに、MarkdownはMermaid構文を内部でサポートしているため、ソフトウェアの切り替えを効果的に回避し、コンテンツ自体に集中できます。

人魚の公式文書

https://jelly-js.github.io/marie/#/README

チャートタイプのサポート

  • 円グラフ

  • フローチャート

  • シーケンス図(シーケンス図)

  • 状態図

  • ガント図

  • クラス図

  • などなど

パイチャート
パイチャートは私たちがよく使うチャートです。人魚の中で最もシンプルで、基本的に一目でわかります。

Markdownで人魚の構文でチャートを描く

コード

    pie 
    title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15 
``

用到的关键词

![](https://s4.51cto.com/images/blog/202012/30/74bb08c25ed1da93f53dfbdb3ce98ce3.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
**流程图**

![](https://s4.51cto.com/images/blog/202012/30/281dc49b4ebc4b539e7877ce21a5eb50.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
该流程图就是用下方的代码再markdown中实现的
graph RL;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
关键词解读

![](https://s4.51cto.com/images/blog/202012/30/b499ff347622840acb18daef90b45e42.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)

节点还可以用:::调用修饰函数,如下

![](https://s4.51cto.com/images/blog/202012/30/e9af8b8637b650eb802a2c7338803cff.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
graph LR
    A:::someclass --> B
    classDef someclass fill:#f96;

**时序图**
![](https://s4.51cto.com/images/blog/202012/30/73bb68e7ddf3d249efbbfe3c80b56999.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)

时序图用于描述对象之间的传递消息的时间顺序, 即用例中的行为顺序. 顺序图稍微复杂了一丢丢,代码如下
sequenceDiagram
    participant Alice
    participant Bob
    participant John

    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!

用到的关键词
![](https://s4.51cto.com/images/blog/202012/30/764afd969c944bc8f6c436b151ea0dc1.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
**状态图**
通过建立对象的生存周期模型来描述对象随时间变化的动态行为

![](https://s4.51cto.com/images/blog/202012/30/43edc0620ed4c342c5178680b649a51c.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)

代码
stateDiagram 
    Start --> First
    First --> Second
    First --> Third
    Second --> End
    Third --> End

    state First {
        [*] --> fir
        fir --> [*]
    }
    state Second {
        [*] --> sec
        sec --> [*]
    }
    state Third {}
代码关键词解读
![](https://s4.51cto.com/images/blog/202012/30/e3077826ba8b0b543ebc9794f6babf4e.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)

**甘特图**
![](https://s4.51cto.com/images/blog/202012/30/c5e79ecbc49a5417da4fbf497b0b2999.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)

代码如下
gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

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
用到的关键词

![](https://s4.51cto.com/images/blog/202012/30/4e11cd77fb0db626ea57cc0b04ffb8a2.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)

**class类图**
面向对象的编程会经常看到类,类与类有所属关系。比如中国人是人类的一员,而人类又隶属于灵长类动物。

![](https://s4.51cto.com/images/blog/202012/30/f95d1db5756557fe693fa996b7c332ac.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)

代码
classDiagram
      Animal <|-- Duck
      Animal <|-- Fish
      Animal <|-- Zebra
      Animal : int age
      Animal : String gender
      Animal: isMammal()
      Animal: mate()
      class Duck{
          String beakColor
          swim()
          quack()
      }
      class Fish{
          int sizeInFeet
          canEat()
      }
      class Zebra{
          bool is_wild
          run()
          eat()
      }


用到的关键词

![](https://s4.51cto.com/images/blog/202012/30/212f28dbb6936d507ca3af5fb7223d2f.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
大家如果熟悉Python,就能理解类的属性和方法区别就是是否有括号。

おすすめ

転載: blog.51cto.com/15069487/2578556