octave_mermaid

欢迎广大开发者将此文档翻译为其他语言。

软件源安装

octave_mermaid_js可以通过Octave软件源安装。

通过Octave软件源安装octave_mermaid_js，代码如下：

>> pkg install -forge octave_mermaid_js

在线安装

octave_mermaid_js可以在线安装。

在线安装octave_mermaid_js，代码如下：

>> pkg install 'https://github.com/CNOCTAVE/octave_mermaid_js/releases/download/1.0.0/octave_mermaid_js.tar.gz'

源码安装

octave_mermaid_js可以直接使用tar包安装。

假设你下载的源码包名为octave_mermaid_js.tar.gz，源码安装的代码如下：

>> pkg install octave_mermaid_js.tar.gz -local

如何使用

在安装后，加载octave_mermaid_js即可使用，代码如下：

>> pkg load octave_mermaid_js

依赖库

不同的Linux发行版有不同的依赖库名。

Fedora：

$ sudo dnf install python3-pillow python3-matplotlib python3-requests

在其他的Linux发行版上的命令有所不同。欢迎广大开发者补充。

函数用法

mermaid_js_imshow

[ret, status] = mermaid_js_imshow (GRAPH)

输入Markdown格式的图GRAPH，显示图片。

返回内部输出ret和图片生成状态status。

如果status=0，则代表图片生成成功，否则代表图片生成失败。

如果图片生成失败，那么将显示失败或显示错误的图片。

mermaid_js_save

[ret, status] = mermaid_js_save (GRAPH, FILE_PATH)

输入Markdown格式的图GRAPH和保存图片的文件名FILE_PATH，保存图片。

返回内部输出ret和图片生成状态status。

如果status=0，则代表图片生成成功，否则代表图片生成失败。

如果图片生成失败，那么将保存失败或保存错误的图片。

mermaid_js_examples

mermaid_js_example_string = mermaid_js_examples (NAME)

获取octave_mermaid_js的用例。

支持的用例如下：

flowchart | 流程图

sequence_diagram | 时序图

class_diagram | 类图

state_diagram | 状态图

er_diagram | ER图

user_journey_diagram | 路线图

gantt_chart | 甘特图

pie_chart | 饼图

quadrant_chart | 象限图

requirement_diagram | 依赖图

git_graph | Git图

c4_diagram | C4图

mindmap | 思维导图

timeline | 时间线图

zenuml | ZenUML

sankey_diagram | Sankey图

xy_chart | XY图

block_diagram | 方块图

packet_diagram | 数据包图

mermaid_s_kanban_diagram | Mermaid的看板图

architecture_diagram | 架构图

radar_diagram | 雷达图

treemap_diagram | 矩形树图

常见用例

保存并显示Markdown图，代码如下：

graph = {
    "graph LR;"
    "    A--> B & C & D"
    "    B--> A & E"
    "    C--> A & E"
    "    D--> A & E"
    "    E--> B & C & D"
};
graph = strjoin(graph, "\n");
[ret, status] = mermaid_js_save(graph, "result.png")
[ret, status] = mermaid_js_imshow(graph)

流程图

流程图的文档详见：

https://mermaid.js.org/syntax/flowchart.html

用流程图示例绘图并显示，代码如下：

>> graph = mermaid_js_examples("flowchart")
graph = flowchart LR
    Start --> Stop
>> mermaid_js_imshow(graph)

时序图

时序图的文档详见：

https://mermaid.js.org/syntax/sequenceDiagram.html

用时序图示例绘图并显示，代码如下：

>> graph = mermaid_js_examples("sequence_diagram")
graph = sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!
>> mermaid_js_imshow(graph)

类图

类图的文档详见：

https://mermaid.js.org/syntax/classDiagram.html

用类图示例绘图并显示，代码如下：

>> graph = mermaid_js_examples("class_diagram")
graph = ---
title: Animal example
---
classDiagram
    note "From Duck till Zebra"
    Animal <|-- Duck
    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
    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()
    }
>> mermaid_js_imshow(graph)

状态图

状态图的文档详见：

https://mermaid.js.org/syntax/stateDiagram.html

用状态图示例绘图并显示，代码如下：

>> graph = mermaid_js_examples("state_diagram")
graph = ---
title: Simple sample
---
stateDiagram-v2
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
>> mermaid_js_imshow(graph)

ER图

ER图的文档详见：

https://mermaid.js.org/syntax/entityRelationshipDiagram.html

用ER图示例绘图并显示，代码如下：

>> graph = mermaid_js_examples("er_diagram")
graph = ---
title: Order example
---
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
>> mermaid_js_imshow(graph)

路线图

路线图的文档详见：

https://mermaid.js.org/syntax/userJourney.html

用路线图示例绘图并显示，代码如下：

>> graph = mermaid_js_examples("user_journey_diagram")
graph = journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me
>> mermaid_js_imshow(graph)

甘特图

甘特图的文档详见：

https://mermaid.js.org/syntax/gantt.html

用甘特图示例绘图并显示，代码如下：

>> graph = mermaid_js_examples("gantt_chart")
graph = gantt
    title A Gantt Diagram
    dateFormat YYYY-MM-DD
    section Section
        A task          :a1, 2014-01-01, 30d
        Another task    :after a1, 20d
    section Another
        Task in Another :2014-01-12, 12d
        another task    :24d
>> mermaid_js_imshow(graph)

饼图

饼图的文档详见：

https://mermaid.js.org/syntax/pie.html

用饼图示例绘图并显示，代码如下：

>> graph = mermaid_js_examples("pie_chart")
graph = pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
>> mermaid_js_imshow(graph)

象限图

象限图的文档详见：

https://mermaid.js.org/syntax/quadrantChart.html

用象限图示例绘图并显示，代码如下：

>> graph = mermaid_js_examples("quadrant_chart")
graph = quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]
>> mermaid_js_imshow(graph)

依赖图

依赖图的文档详见：

https://mermaid.js.org/syntax/requirementDiagram.html

用依赖图示例绘图并显示，代码如下：

>> graph = mermaid_js_examples("requirement_diagram")
graph =     requirementDiagram

    requirement test_req {
    id: 1
    text: the test text.
    risk: high
    verifymethod: test
    }

    element test_entity {
    type: simulation
    }

    test_entity - satisfies -> test_req
>> mermaid_js_imshow(graph)

Git图

Git图的文档详见：

https://mermaid.js.org/syntax/gitgraph.html

用Git图示例绘图并显示，代码如下：

>> graph = mermaid_js_examples("git_graph")
graph = ---
title: Example Git diagram
---
gitGraph
   commit
   commit
   branch develop
   checkout develop
   commit
   commit
   checkout main
   merge develop
   commit
   commit
>> mermaid_js_imshow(graph)

C4图

C4图的文档详见：

https://mermaid.js.org/syntax/c4.html

用C4图示例绘图并显示，代码如下：

>> graph = mermaid_js_examples("c4_diagram")
graph =     C4Context
      title System Context diagram for Internet Banking System
      Enterprise_Boundary(b0, "BankBoundary0") {
        Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
        Person(customerB, "Banking Customer B")
        Person_Ext(customerC, "Banking Customer C", "desc")

        Person(customerD, "Banking Customer D", "A customer of the bank, 
 with personal bank accounts.")

        System(SystemAA, "Internet Banking System", "Allows customers to view information about their bankaccounts, and make payments.")

        Enterprise_Boundary(b1, "BankBoundary") {

          SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")

          System_Boundary(b2, "BankBoundary2") {
            System(SystemA, "Banking System A")
            System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
          }

          System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
          SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")

          Boundary(b3, "BankBoundary3", "boundary") {
            SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
            SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
          }
        }
      }

      BiRel(customerA, SystemAA, "Uses")
      BiRel(SystemAA, SystemE, "Uses")
      Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
      Rel(SystemC, customerA, "Sends e-mails to")

      UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
      UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
      UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
      UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
      UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")

      UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
>> mermaid_js_imshow(graph)

思维导图

思维导图的文档详见：

https://mermaid.js.org/syntax/mindmap.html

用思维导图示例绘图并显示，代码如下：

>> graph = mermaid_js_examples("mindmap")
graph = mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness
and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid
>> mermaid_js_imshow(graph)

时间线图

时间线图的文档详见：

https://mermaid.js.org/syntax/timeline.html

用时间线图示例绘图并显示，代码如下：

>> graph = mermaid_js_examples("timeline")
graph = timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook
         : Google
    2005 : YouTube
    2006 : Twitter
>> mermaid_js_imshow(graph)

ZenUML

ZenUML的文档详见：

https://mermaid.js.org/syntax/zenuml.html

用ZenUML示例绘图并显示，代码如下：

>> graph = mermaid_js_examples("zenuml")
graph = zenuml
    title Demo
    Alice->John: Hello John, how are you?
    John->Alice: Great!
    Alice->John: See you later!
>> mermaid_js_imshow(graph)

Sankey图

Sankey图的文档详见：

https://mermaid.js.org/syntax/sankey.html

用Sankey图示例绘图并显示，代码如下：

>> graph = mermaid_js_examples("sankey_diagram")
graph = ---
config:
  sankey:
    showValues: false
---
sankey

Agricultural 'waste',Bio-conversion,124.729
Bio-conversion,Liquid,0.597
Bio-conversion,Losses,26.862
Bio-conversion,Solid,280.322
Bio-conversion,Gas,81.144
Biofuel imports,Liquid,35
Biomass imports,Solid,35
Coal imports,Coal,11.606
Coal reserves,Coal,63.965
Coal,Solid,75.571
District heating,Industry,10.639
District heating,Heating and cooling - commercial,22.505
District heating,Heating and cooling - homes,46.184
Electricity grid,Over generation / exports,104.453
Electricity grid,Heating and cooling - homes,113.726
Electricity grid,H2 conversion,27.14
Electricity grid,Industry,342.165
Electricity grid,Road transport,37.797
Electricity grid,Agriculture,4.412
Electricity grid,Heating and cooling - commercial,40.858
Electricity grid,Losses,56.691
Electricity grid,Rail transport,7.863
Electricity grid,Lighting & appliances - commercial,90.008
Electricity grid,Lighting & appliances - homes,93.494
Gas imports,Ngas,40.719
Gas reserves,Ngas,82.233
Gas,Heating and cooling - commercial,0.129
Gas,Losses,1.401
Gas,Thermal generation,151.891
Gas,Agriculture,2.096
Gas,Industry,48.58
Geothermal,Electricity grid,7.013
H2 conversion,H2,20.897
H2 conversion,Losses,6.242
H2,Road transport,20.897
Hydro,Electricity grid,6.995
Liquid,Industry,121.066
Liquid,International shipping,128.69
Liquid,Road transport,135.835
Liquid,Domestic aviation,14.458
Liquid,International aviation,206.267
Liquid,Agriculture,3.64
Liquid,National navigation,33.218
Liquid,Rail transport,4.413
Marine algae,Bio-conversion,4.375
Ngas,Gas,122.952
Nuclear,Thermal generation,839.978
Oil imports,Oil,504.287
Oil reserves,Oil,107.703
Oil,Liquid,611.99
Other waste,Solid,56.587
Other waste,Bio-conversion,77.81
Pumped heat,Heating and cooling - homes,193.026
Pumped heat,Heating and cooling - commercial,70.672
Solar PV,Electricity grid,59.901
Solar Thermal,Heating and cooling - homes,19.263
Solar,Solar Thermal,19.263
Solar,Solar PV,59.901
Solid,Agriculture,0.882
Solid,Thermal generation,400.12
Solid,Industry,46.477
Thermal generation,Electricity grid,525.531
Thermal generation,Losses,787.129
Thermal generation,District heating,79.329
Tidal,Electricity grid,9.452
UK land based bioenergy,Bio-conversion,182.01
Wave,Electricity grid,19.013
Wind,Electricity grid,289.366
>> mermaid_js_imshow(graph)

XY图

XY图的文档详见：

https://mermaid.js.org/syntax/xyChart.html

用XY图示例绘图并显示，代码如下：

>> graph = mermaid_js_examples("xy_chart")
graph = xychart
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
>> mermaid_js_imshow(graph)

方块图

方块图的文档详见：

https://mermaid.js.org/syntax/block.html

用方块图示例绘图并显示，代码如下：

>> graph = mermaid_js_examples("block_diagram")
graph = block
columns 1
  db(("DB"))
  blockArrowId6<["& nbsp;& nbsp;& nbsp;"]>(down)
  block:ID
    A
    B["A wide one in the middle"]
    C
  end
  space
  D
  ID --> D
  C --> D
  style B fill:#969,stroke:#333,stroke-width:4px
>> mermaid_js_imshow(graph)

数据包图

数据包图的文档详见：

https://mermaid.js.org/syntax/packet.html

用数据包图示例绘图并显示，代码如下：

>> graph = mermaid_js_examples("packet_diagram")
graph = packet
title UDP Packet
+16: "Source Port"
+16: "Destination Port"
32-47: "Length"
48-63: "Checksum"
64-95: "Data (variable length)"
>> mermaid_js_imshow(graph)

Mermaid的看板图

Mermaid的看板图的文档详见：

https://mermaid.js.org/syntax/kanban.html

用Mermaid的看板图示例绘图并显示，代码如下：

>> graph = mermaid_js_examples("mermaid_s_kanban_diagram")
graph = kanban
todo[Todo]
  id3[Update Database Function]@{ ticket: MC-2037, assigned: 'knsv', priority: 'High' }
>> mermaid_js_imshow(graph)

架构图

架构图的文档详见：

https://mermaid.js.org/syntax/architecture.html

用架构图示例绘图并显示，代码如下：

>> graph = mermaid_js_examples("architecture_diagram")
graph = architecture-beta
    group api(cloud)[API]

    service db(database)[Database] in api
    service disk1(disk)[Storage] in api
    service disk2(disk)[Storage] in api
    service server(server)[Server] in api

    db:L -- R:server
    disk1:T -- B:server
    disk2:T -- B:db
>> mermaid_js_imshow(graph)

雷达图

雷达图的文档详见：

https://mermaid.js.org/syntax/radar.html

用雷达图示例绘图并显示，代码如下：

>> graph = mermaid_js_examples("radar_diagram")
graph = ---
title: "Grades"
---
radar-beta
  axis m["Math"], s["Science"], e["English"]
  axis h["History"], g["Geography"], a["Art"]
  curve a["Alice"]{85, 90, 80, 70, 75, 90}
  curve b["Bob"]{70, 75, 85, 80, 90, 85}

  max 100
  min 0
>> mermaid_js_imshow(graph)

矩形树图

矩形树图的文档详见：

https://mermaid.js.org/syntax/treemap.html

用矩形树图示例绘图并显示，代码如下：

>> graph = mermaid_js_examples("treemap_diagram")
graph = treemap-beta
"Category A"
    "Item A1": 10
    "Item A2": 20
"Category B"
    "Item B1": 15
    "Item B2": 25
>> mermaid_js_imshow(graph)

引用octave_mermaid_js

如果你在学术研究中涉及octave_mermaid_js，那么可以按需引用以下内容。

octave_mermaid_js源码(BibTeX)

@misc{CNOCTAVE2025, author = {Yu Hongbo, }, title = {octave_mermaid_js}, year = {2025}, howpublished = {\url{https://github.com/CNOCTAVE/octave_mermaid_js}}, }

octave_mermaid_js文档(BibTeX)

@techreport{CNOCTAVE2025, author = {Yu Hongbo, }, title = {octave_mermaid_js Document}, institution = {BA DU XIN SHANG}, year = {2025}, number = {16}, month = {5}, url = {https://cnoctave.github.io/octave_mermaid_js/index.html}, urldate = {2025-05-16}, }