免费学校网站管理系统,阜新旅游网站建设,wordpress调样式,wordpress 折叠文章本节我们来学习markdown的图表。 Markdown 本身并不支持图表#xff0c;但 Markdown 在技术文章、文档、博客领域使用较多#xff0c;所以非常多的 Markdown 解析器是支持图表扩展的。在支持图表扩展的 Markdown 解析器中#xff0c;我们可以使用解析支持的图表语法来渲染图…本节我们来学习markdown的图表。 Markdown 本身并不支持图表但 Markdown 在技术文章、文档、博客领域使用较多所以非常多的 Markdown 解析器是支持图表扩展的。在支持图表扩展的 Markdown 解析器中我们可以使用解析支持的图表语法来渲染图表。 由于图表不是 Markdown 标准不同的Markdown编辑器支持的图表类型也不同。 我们这里将会使用的是 Mermaid。 图表的使用方法和围栏式代码块一样但代码语言固定为 mermaid,Markdown 解析器会把代码为 mermaid 的代码块解析并渲染为图表。 1. 流程图 流程图是一种用图形方式表示算法、程序或者工作流程的图形化工具。它使用不同的符号和线条来表示各个步骤、决策、输入输出和流程控制等。 在markdown中输入mermaid代码
mermaid
flowchart LRA[直角矩形] --|链接文本| B(圆角矩形)B -- C{选择}C --|一| D[结果一]C --|二| E[结果二]渲染后输出下表 #mermaid-svg-jHcU6tauV0tz0dqG {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-jHcU6tauV0tz0dqG .error-icon{fill:#552222;}#mermaid-svg-jHcU6tauV0tz0dqG .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-jHcU6tauV0tz0dqG .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-jHcU6tauV0tz0dqG .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-jHcU6tauV0tz0dqG .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-jHcU6tauV0tz0dqG .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-jHcU6tauV0tz0dqG .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-jHcU6tauV0tz0dqG .marker{fill:#333333;stroke:#333333;}#mermaid-svg-jHcU6tauV0tz0dqG .marker.cross{stroke:#333333;}#mermaid-svg-jHcU6tauV0tz0dqG svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-jHcU6tauV0tz0dqG .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-jHcU6tauV0tz0dqG .cluster-label text{fill:#333;}#mermaid-svg-jHcU6tauV0tz0dqG .cluster-label span{color:#333;}#mermaid-svg-jHcU6tauV0tz0dqG .label text,#mermaid-svg-jHcU6tauV0tz0dqG span{fill:#333;color:#333;}#mermaid-svg-jHcU6tauV0tz0dqG .node rect,#mermaid-svg-jHcU6tauV0tz0dqG .node circle,#mermaid-svg-jHcU6tauV0tz0dqG .node ellipse,#mermaid-svg-jHcU6tauV0tz0dqG .node polygon,#mermaid-svg-jHcU6tauV0tz0dqG .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-jHcU6tauV0tz0dqG .node .label{text-align:center;}#mermaid-svg-jHcU6tauV0tz0dqG .node.clickable{cursor:pointer;}#mermaid-svg-jHcU6tauV0tz0dqG .arrowheadPath{fill:#333333;}#mermaid-svg-jHcU6tauV0tz0dqG .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-jHcU6tauV0tz0dqG .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-jHcU6tauV0tz0dqG .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-jHcU6tauV0tz0dqG .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-jHcU6tauV0tz0dqG .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-jHcU6tauV0tz0dqG .cluster text{fill:#333;}#mermaid-svg-jHcU6tauV0tz0dqG .cluster span{color:#333;}#mermaid-svg-jHcU6tauV0tz0dqG div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-jHcU6tauV0tz0dqG :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 链接文本 一 二 直角矩形 圆角矩形 选择 结果一 结果二 一个典型的流程图通常包含以下几个要素 开始/结束符号用来表示流程的开始和结束点通常用一个椭圆形或者圆形来表示。 过程符号用来表示具体的操作步骤通常用矩形框来表示。矩形框中会写明具体的操作或者处理过程。 判断符号用来表示决策或者判断的步骤通常用菱形来表示。菱形中会写明判断条件根据条件的不同流程会分支到不同的路径。 输入/输出符号用来表示输入或者输出的步骤通常用梯形来表示。梯形中会写明输入或者输出的内容。 连接线用来连接不同的步骤表示流程的顺序和逻辑关系。连接线可以是直线、箭头线或者其他形状的线。 注释符号用来添加说明或者注释通常用矩形框或者椭圆形来表示。 通过这些符号和线条的组合流程图可以清晰地展示出一个算法、程序或者工作流程的执行过程和逻辑关系。它可以帮助人们更好地理解和分析复杂的流程并且可以用于沟通、教学和文档编写等方面。 2. 时序图
时序图Sequence Diagram是一种用于描述对象之间交互行为的图形化工具。它展示了对象之间的消息传递顺序和时序关系能够清晰地展示系统或者软件的执行流程。输入
mermaid
sequenceDiagramautonumberpar Action 1Alice-John: Hello John, how are you?and Action 2Alice-Bob: Hello Bob, how are you?endAlice-John: Hello John, how are you?Alice-John: John, can you hear me?John---Alice: Hi Alice, I can hear you!Note right of John: John is perceptiveJohn---Alice: I feel great!loop Every minuteJohn--Alice: Great!end输出 #mermaid-svg-uDboXfiuToFTScTV {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-uDboXfiuToFTScTV .error-icon{fill:#552222;}#mermaid-svg-uDboXfiuToFTScTV .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-uDboXfiuToFTScTV .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-uDboXfiuToFTScTV .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-uDboXfiuToFTScTV .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-uDboXfiuToFTScTV .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-uDboXfiuToFTScTV .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-uDboXfiuToFTScTV .marker{fill:#333333;stroke:#333333;}#mermaid-svg-uDboXfiuToFTScTV .marker.cross{stroke:#333333;}#mermaid-svg-uDboXfiuToFTScTV svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-uDboXfiuToFTScTV .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-uDboXfiuToFTScTV text.actortspan{fill:black;stroke:none;}#mermaid-svg-uDboXfiuToFTScTV .actor-line{stroke:grey;}#mermaid-svg-uDboXfiuToFTScTV .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-uDboXfiuToFTScTV .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-uDboXfiuToFTScTV #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-uDboXfiuToFTScTV .sequenceNumber{fill:white;}#mermaid-svg-uDboXfiuToFTScTV #sequencenumber{fill:#333;}#mermaid-svg-uDboXfiuToFTScTV #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-uDboXfiuToFTScTV .messageText{fill:#333;stroke:#333;}#mermaid-svg-uDboXfiuToFTScTV .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-uDboXfiuToFTScTV .labelText,#mermaid-svg-uDboXfiuToFTScTV .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-uDboXfiuToFTScTV .loopText,#mermaid-svg-uDboXfiuToFTScTV .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-uDboXfiuToFTScTV .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-uDboXfiuToFTScTV .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-uDboXfiuToFTScTV .noteText,#mermaid-svg-uDboXfiuToFTScTV .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-uDboXfiuToFTScTV .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-uDboXfiuToFTScTV .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-uDboXfiuToFTScTV .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-uDboXfiuToFTScTV .actorPopupMenu{position:absolute;}#mermaid-svg-uDboXfiuToFTScTV .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-uDboXfiuToFTScTV .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-uDboXfiuToFTScTV .actor-man circle,#mermaid-svg-uDboXfiuToFTScTV line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-uDboXfiuToFTScTV :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} Alice John Bob Hello John, how are you? 1 Hello Bob, how are you? 2 par [Action 1] [Action 2] Hello John, how are you? 3 John, can you hear me? 4 Hi Alice, I can hear you! 5 John is perceptive I feel great! 6 Great! 7 loop [Every minute] Alice John Bob 时序图主要由以下几个要素组成 参与者Actor参与者是指在系统中扮演角色的实体可以是人、软件模块、硬件设备等。在时序图中参与者通常用一个矩形框来表示框内写明参与者的名称。对象Object对象是指在系统中具体的实例可以是类的实例、组件的实例等。在时序图中对象通常用一个矩形框来表示框内写明对象的名称和类别。生命周期Lifeline生命周期是指对象存在的时间段在时序图中用一条垂直的虚线来表示。虚线上方表示对象的存在时期下方表示对象不存在的时期。消息Message消息是指对象之间的交互行为可以是方法的调用、信号的发送等。在时序图中消息通常用带箭头的直线来表示箭头指向接收消息的对象。消息可以包含调用的方法名、参数和返回值等信息。控制流Control Flow控制流是指消息的传递顺序和时序关系。在时序图中控制流可以用数字或者条件语句来表示表示消息的顺序执行或者分支执行。 通过这些要素的组合时序图可以清晰地展示对象之间的交互行为和时序关系帮助人们理解和分析系统的执行流程。时序图通常用于需求分析、系统设计和软件开发等阶段是一种非常重要的建模工具。 3. 类图
类图Class Diagram是一种用于描述系统中类和类之间关系的图形化工具。它展示了系统中的类、类之间的关系以及类的属性和方法等信息是面向对象分析与设计中最常用的建模工具之一。输入
mermaid
classDiagramAnimal |-- DuckAnimal |-- FishAnimal |-- ZebraAnimal : int ageAnimal : String genderAnimal: isMammal()Animal: mate()class Duck{String beakColorswim()quack()}class Fish{-int sizeInFeet-canEat()}class Zebra{bool is_wildrun()}输出 #mermaid-svg-6mAJvC9rfsP93YSc {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-6mAJvC9rfsP93YSc .error-icon{fill:#552222;}#mermaid-svg-6mAJvC9rfsP93YSc .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-6mAJvC9rfsP93YSc .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-6mAJvC9rfsP93YSc .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-6mAJvC9rfsP93YSc .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-6mAJvC9rfsP93YSc .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-6mAJvC9rfsP93YSc .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-6mAJvC9rfsP93YSc .marker{fill:#333333;stroke:#333333;}#mermaid-svg-6mAJvC9rfsP93YSc .marker.cross{stroke:#333333;}#mermaid-svg-6mAJvC9rfsP93YSc svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-6mAJvC9rfsP93YSc g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-6mAJvC9rfsP93YSc g.classGroup text .title{font-weight:bolder;}#mermaid-svg-6mAJvC9rfsP93YSc .nodeLabel,#mermaid-svg-6mAJvC9rfsP93YSc .edgeLabel{color:#131300;}#mermaid-svg-6mAJvC9rfsP93YSc .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-6mAJvC9rfsP93YSc .label text{fill:#131300;}#mermaid-svg-6mAJvC9rfsP93YSc .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-6mAJvC9rfsP93YSc .classTitle{font-weight:bolder;}#mermaid-svg-6mAJvC9rfsP93YSc .node rect,#mermaid-svg-6mAJvC9rfsP93YSc .node circle,#mermaid-svg-6mAJvC9rfsP93YSc .node ellipse,#mermaid-svg-6mAJvC9rfsP93YSc .node polygon,#mermaid-svg-6mAJvC9rfsP93YSc .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-6mAJvC9rfsP93YSc .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-6mAJvC9rfsP93YSc g.clickable{cursor:pointer;}#mermaid-svg-6mAJvC9rfsP93YSc g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-6mAJvC9rfsP93YSc g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-6mAJvC9rfsP93YSc .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-6mAJvC9rfsP93YSc .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-6mAJvC9rfsP93YSc .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-6mAJvC9rfsP93YSc .dashed-line{stroke-dasharray:3;}#mermaid-svg-6mAJvC9rfsP93YSc #compositionStart,#mermaid-svg-6mAJvC9rfsP93YSc .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-6mAJvC9rfsP93YSc #compositionEnd,#mermaid-svg-6mAJvC9rfsP93YSc .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-6mAJvC9rfsP93YSc #dependencyStart,#mermaid-svg-6mAJvC9rfsP93YSc .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-6mAJvC9rfsP93YSc #dependencyStart,#mermaid-svg-6mAJvC9rfsP93YSc .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-6mAJvC9rfsP93YSc #extensionStart,#mermaid-svg-6mAJvC9rfsP93YSc .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-6mAJvC9rfsP93YSc #extensionEnd,#mermaid-svg-6mAJvC9rfsP93YSc .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-6mAJvC9rfsP93YSc #aggregationStart,#mermaid-svg-6mAJvC9rfsP93YSc .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-6mAJvC9rfsP93YSc #aggregationEnd,#mermaid-svg-6mAJvC9rfsP93YSc .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-6mAJvC9rfsP93YSc .edgeTerminals{font-size:11px;}#mermaid-svg-6mAJvC9rfsP93YSc :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} Animal int age String gender isMammal() mate() Duck String beakColor swim() quack() Fish -int sizeInFeet -canEat() Zebra bool is_wild run() 类图主要由以下几个要素组成 类Class类是指具有相似属性和行为的对象的抽象。在类图中类通常用一个矩形框来表示框内写明类的名称。属性Attribute属性是指类的特征或者状态用于描述类的静态特性。在类图中属性通常写在类的矩形框内格式为“属性名 : 类型”。方法Method方法是指类的行为或者操作用于描述类的动态特性。在类图中方法通常写在类的矩形框内格式为“方法名(参数列表) : 返回类型”。关系Relationship关系是指类之间的连接和依赖关系用于描述类之间的交互和协作。常见的关系有继承、关联、聚合、组合和依赖等。 继承Inheritance表示一个类继承了另一个类的属性和方法用一个带箭头的实线来表示箭头指向父类。关联Association表示类之间存在某种关联关系用一条实线来表示。聚合Aggregation表示类之间的关系是整体与部分的关系用一条带空心菱形的实线来表示菱形指向整体。组合Composition表示类之间的关系是整体与部分的关系并且部分不能独立存在用一条带实心菱形的实线来表示菱形指向整体。依赖Dependency表示一个类依赖于另一个类用一条带箭头的虚线来表示箭头指向被依赖的类。 通过这些要素的组合类图可以清晰地展示系统中的类和类之间的关系帮助人们理解和分析系统的结构和行为。类图通常用于需求分析、系统设计和软件开发等阶段是一种非常重要的建模工具。 4. 状态图
状态图State Diagram是一种用于描述系统中对象状态和状态之间转换的图形化工具。它主要用于建模和描述对象的行为特别是在面向对象系统中。输入
mermaid
stateDiagram-v2[*] -- StillStill -- [*]Still -- MovingMoving -- StillMoving -- CrashCrash -- [*]输出 #mermaid-svg-4tZjak6zpPNcEHAA {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-4tZjak6zpPNcEHAA .error-icon{fill:#552222;}#mermaid-svg-4tZjak6zpPNcEHAA .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-4tZjak6zpPNcEHAA .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-4tZjak6zpPNcEHAA .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-4tZjak6zpPNcEHAA .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-4tZjak6zpPNcEHAA .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-4tZjak6zpPNcEHAA .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-4tZjak6zpPNcEHAA .marker{fill:#333333;stroke:#333333;}#mermaid-svg-4tZjak6zpPNcEHAA .marker.cross{stroke:#333333;}#mermaid-svg-4tZjak6zpPNcEHAA svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-4tZjak6zpPNcEHAA defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-4tZjak6zpPNcEHAA g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-4tZjak6zpPNcEHAA g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-4tZjak6zpPNcEHAA g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-4tZjak6zpPNcEHAA g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-4tZjak6zpPNcEHAA g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-4tZjak6zpPNcEHAA .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-4tZjak6zpPNcEHAA .stateGroup .composit{fill:white;border-bottom:1px;}#mermaid-svg-4tZjak6zpPNcEHAA .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-4tZjak6zpPNcEHAA .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-4tZjak6zpPNcEHAA .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-4tZjak6zpPNcEHAA .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-4tZjak6zpPNcEHAA .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-4tZjak6zpPNcEHAA .edgeLabel .label text{fill:#333;}#mermaid-svg-4tZjak6zpPNcEHAA .label div .edgeLabel{color:#333;}#mermaid-svg-4tZjak6zpPNcEHAA .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-4tZjak6zpPNcEHAA .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-4tZjak6zpPNcEHAA .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-4tZjak6zpPNcEHAA .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-4tZjak6zpPNcEHAA .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-4tZjak6zpPNcEHAA .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-4tZjak6zpPNcEHAA .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-4tZjak6zpPNcEHAA #statediagram-barbEnd{fill:#333333;}#mermaid-svg-4tZjak6zpPNcEHAA .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-4tZjak6zpPNcEHAA .cluster-label,#mermaid-svg-4tZjak6zpPNcEHAA .nodeLabel{color:#131300;}#mermaid-svg-4tZjak6zpPNcEHAA .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-4tZjak6zpPNcEHAA .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-4tZjak6zpPNcEHAA .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-4tZjak6zpPNcEHAA .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-4tZjak6zpPNcEHAA .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-4tZjak6zpPNcEHAA .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-4tZjak6zpPNcEHAA .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-4tZjak6zpPNcEHAA .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-4tZjak6zpPNcEHAA .note-edge{stroke-dasharray:5;}#mermaid-svg-4tZjak6zpPNcEHAA .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-4tZjak6zpPNcEHAA .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-4tZjak6zpPNcEHAA .statediagram-note text{fill:black;}#mermaid-svg-4tZjak6zpPNcEHAA .statediagram-note .nodeLabel{color:black;}#mermaid-svg-4tZjak6zpPNcEHAA .statediagram .edgeLabel{color:red;}#mermaid-svg-4tZjak6zpPNcEHAA #dependencyStart,#mermaid-svg-4tZjak6zpPNcEHAA #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-4tZjak6zpPNcEHAA :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} Still Moving Crash 状态图由以下几个要素组成 状态State状态是指对象所处的某种情况或条件。在状态图中状态通常用一个圆角矩形框来表示框内写明状态的名称。转换Transition转换是指对象从一个状态转换到另一个状态的过程。在状态图中转换通常用一个带箭头的实线来表示箭头指向转换的目标状态。事件Event事件是指触发状态转换的外部或内部事件。在状态图中事件通常用一个小圆圈来表示并与转换相连。动作Action动作是指在状态转换过程中执行的操作或行为。在状态图中动作通常写在转换的箭头上或者与转换相连。 通过这些要素的组合状态图可以清晰地展示对象的状态和状态之间的转换关系帮助人们理解和分析系统的行为。状态图通常用于需求分析、系统设计和软件开发等阶段是一种非常重要的建模工具。 5. 实体关系图
实体关系图Entity-Relationship Diagram简称ER图是一种用于描述系统中实体、属性和实体之间关系的图形化工具。它主要用于数据库设计和数据建模帮助人们理解和分析系统中的数据结构和关系。输入
mermaid
erDiagramCUSTOMER ||--o{ ORDER : placesORDER ||--|{ LINE-ITEM : containsCUSTOMER }|..|{ DELIVERY-ADDRESS : uses输出 #mermaid-svg-x9ZuCHIvUuz550re {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-x9ZuCHIvUuz550re .error-icon{fill:#552222;}#mermaid-svg-x9ZuCHIvUuz550re .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-x9ZuCHIvUuz550re .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-x9ZuCHIvUuz550re .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-x9ZuCHIvUuz550re .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-x9ZuCHIvUuz550re .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-x9ZuCHIvUuz550re .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-x9ZuCHIvUuz550re .marker{fill:#333333;stroke:#333333;}#mermaid-svg-x9ZuCHIvUuz550re .marker.cross{stroke:#333333;}#mermaid-svg-x9ZuCHIvUuz550re svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-x9ZuCHIvUuz550re .entityBox{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-x9ZuCHIvUuz550re .attributeBoxOdd{fill:#ffffff;stroke:#9370DB;}#mermaid-svg-x9ZuCHIvUuz550re .attributeBoxEven{fill:#f2f2f2;stroke:#9370DB;}#mermaid-svg-x9ZuCHIvUuz550re .relationshipLabelBox{fill:hsl(80, 100%, 96.2745098039%);opacity:0.7;background-color:hsl(80, 100%, 96.2745098039%);}#mermaid-svg-x9ZuCHIvUuz550re .relationshipLabelBox rect{opacity:0.5;}#mermaid-svg-x9ZuCHIvUuz550re .relationshipLine{stroke:#333333;}#mermaid-svg-x9ZuCHIvUuz550re :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} CUSTOMER ORDER LINE-ITEM DELIVERY-ADDRESS places contains uses 在实体关系图中有以下几个基本要素 实体Entity实体是指系统中具有独立存在和可区分性的事物或对象。在实体关系图中实体通常用一个矩形框来表示框内写明实体的名称。属性Attribute属性是指实体所具有的特征或描述。在实体关系图中属性通常用椭圆形框来表示框内写明属性的名称。关系Relationship关系是指实体之间的联系或连接。在实体关系图中关系通常用菱形框来表示框内写明关系的名称。域Domain域是指属性的取值范围或约束条件。在实体关系图中域通常用括号括起来写在属性的旁边。 通过这些要素的组合实体关系图可以清晰地展示实体、属性和实体之间的关系帮助人们理解和设计系统的数据结构和关系。实体关系图通常用于数据库设计、系统分析和软件开发等阶段是一种非常重要的数据建模工具。 6. 用户旅行图
用户旅行图User Journey Map是一种用于描述用户在使用产品或服务过程中的体验和行为的图形化工具。它主要用于用户体验设计和产品开发帮助团队了解用户的需求、期望和痛点从而优化产品的设计和用户体验。输入
mermaid
journeytitle My working daysection Go to workMake tea: 5: MeGo upstairs: 3: MeDo work: 1: Me, Catsection Go homeGo downstairs: 5: MeSit down: 5: Me输出 #mermaid-svg-ih0TWTklSZkhTFXN {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ih0TWTklSZkhTFXN .error-icon{fill:#552222;}#mermaid-svg-ih0TWTklSZkhTFXN .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-ih0TWTklSZkhTFXN .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-ih0TWTklSZkhTFXN .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-ih0TWTklSZkhTFXN .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-ih0TWTklSZkhTFXN .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-ih0TWTklSZkhTFXN .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-ih0TWTklSZkhTFXN .marker{fill:#333333;stroke:#333333;}#mermaid-svg-ih0TWTklSZkhTFXN .marker.cross{stroke:#333333;}#mermaid-svg-ih0TWTklSZkhTFXN svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-ih0TWTklSZkhTFXN .label{font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);color:#333;}#mermaid-svg-ih0TWTklSZkhTFXN .mouth{stroke:#666;}#mermaid-svg-ih0TWTklSZkhTFXN line{stroke:#333;}#mermaid-svg-ih0TWTklSZkhTFXN .legend{fill:#333;}#mermaid-svg-ih0TWTklSZkhTFXN .label text{fill:#333;}#mermaid-svg-ih0TWTklSZkhTFXN .label{color:#333;}#mermaid-svg-ih0TWTklSZkhTFXN .face{fill:#FFF8DC;stroke:#999;}#mermaid-svg-ih0TWTklSZkhTFXN .node rect,#mermaid-svg-ih0TWTklSZkhTFXN .node circle,#mermaid-svg-ih0TWTklSZkhTFXN .node ellipse,#mermaid-svg-ih0TWTklSZkhTFXN .node polygon,#mermaid-svg-ih0TWTklSZkhTFXN .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-ih0TWTklSZkhTFXN .node .label{text-align:center;}#mermaid-svg-ih0TWTklSZkhTFXN .node.clickable{cursor:pointer;}#mermaid-svg-ih0TWTklSZkhTFXN .arrowheadPath{fill:#333333;}#mermaid-svg-ih0TWTklSZkhTFXN .edgePath .path{stroke:#333333;stroke-width:1.5px;}#mermaid-svg-ih0TWTklSZkhTFXN .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-ih0TWTklSZkhTFXN .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-ih0TWTklSZkhTFXN .edgeLabel rect{opacity:0.5;}#mermaid-svg-ih0TWTklSZkhTFXN .cluster text{fill:#333;}#mermaid-svg-ih0TWTklSZkhTFXN div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-ih0TWTklSZkhTFXN .task-type-0,#mermaid-svg-ih0TWTklSZkhTFXN .section-type-0{fill:#ECECFF;}#mermaid-svg-ih0TWTklSZkhTFXN .task-type-1,#mermaid-svg-ih0TWTklSZkhTFXN .section-type-1{fill:#ffffde;}#mermaid-svg-ih0TWTklSZkhTFXN .task-type-2,#mermaid-svg-ih0TWTklSZkhTFXN .section-type-2{fill:hsl(304, 100%, 96.2745098039%);}#mermaid-svg-ih0TWTklSZkhTFXN .task-type-3,#mermaid-svg-ih0TWTklSZkhTFXN .section-type-3{fill:hsl(124, 100%, 93.5294117647%);}#mermaid-svg-ih0TWTklSZkhTFXN .task-type-4,#mermaid-svg-ih0TWTklSZkhTFXN .section-type-4{fill:hsl(176, 100%, 96.2745098039%);}#mermaid-svg-ih0TWTklSZkhTFXN .task-type-5,#mermaid-svg-ih0TWTklSZkhTFXN .section-type-5{fill:hsl(-4, 100%, 93.5294117647%);}#mermaid-svg-ih0TWTklSZkhTFXN .task-type-6,#mermaid-svg-ih0TWTklSZkhTFXN .section-type-6{fill:hsl(8, 100%, 96.2745098039%);}#mermaid-svg-ih0TWTklSZkhTFXN .task-type-7,#mermaid-svg-ih0TWTklSZkhTFXN .section-type-7{fill:hsl(188, 100%, 93.5294117647%);}:root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} Cat Me Go to work Go to work Me Make tea Make tea Me Go upstairs Go upstairs Me Cat Do work Do work Go home Go home Me Go downstairs Go downstairs Me Sit down Sit down My working day 用户旅行图通常包括以下几个要素 用户角色User Role用户旅行图中的用户角色指代使用产品或服务的不同用户类型例如普通用户、管理员、游客等。步骤Steps用户旅行图中的步骤描述了用户在使用产品或服务过程中所经历的各个阶段或环节通常以时间顺序排列。动作Actions动作表示用户在每个步骤中所执行的操作或行为例如点击按钮、填写表单、查看信息等。触点Touchpoints触点指代用户与产品或服务进行交互的方式或渠道例如网站、手机应用、社交媒体等。情感Emotions情感描述了用户在每个步骤中所感受到的情绪或体验例如满意、困惑、失望等。 通过绘制用户旅行图团队可以更好地理解用户在使用产品或服务过程中的体验和行为发现用户的需求和痛点从而进行产品的优化和改进。用户旅行图可以帮助团队深入了解用户的视角提升产品的用户体验增强用户忠诚度并为产品的设计和开发提供指导和支持。 7. 甘特图
甘特图Gantt Chart是一种用于展示项目进度和任务时间安排的图表工具。它以时间为横轴任务为纵轴通过条形图的形式来展示任务的开始时间、结束时间和持续时间。甘特图可以帮助团队和项目经理清晰地了解项目的进度、任务的依赖关系和时间安排从而有效地进行项目管理和资源调度。输入
mermaid
ganttdateFormat YYYY-MM-DDtitle Adding GANTT diagram functionality to mermaidexcludes weekends%% (excludes accepts specific dates in YYYY-MM-DD format, days of the week (sunday) or weekends, but not the word weekdays.)section A sectionCompleted task :done, des1, 2014-01-06,2014-01-08Active task :active, des2, 2014-01-09, 3dFuture task : des3, after des2, 5dFuture task2 : des4, after des3, 5dsection Critical tasksCompleted task in the critical line :crit, done, 2014-01-06,24hImplement parser and jison :crit, done, after des1, 2dCreate tests for parser :crit, active, 3dFuture task in critical line :crit, 5dCreate tests for renderer :2dAdd to mermaid :1dFunctionality added :milestone, 2014-01-25, 0dsection DocumentationDescribe gantt syntax :active, a1, after des1, 3dAdd gantt diagram to demo page :after a1 , 20hAdd another diagram to demo page :doc1, after a1 , 48hsection Last sectionDescribe gantt syntax :after doc1, 3dAdd gantt diagram to demo page :20hAdd another diagram to demo page :48h输出 #mermaid-svg-I9xOBaXttVAqOpSx {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-I9xOBaXttVAqOpSx .error-icon{fill:#552222;}#mermaid-svg-I9xOBaXttVAqOpSx .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-I9xOBaXttVAqOpSx .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-I9xOBaXttVAqOpSx .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-I9xOBaXttVAqOpSx .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-I9xOBaXttVAqOpSx .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-I9xOBaXttVAqOpSx .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-I9xOBaXttVAqOpSx .marker{fill:#333333;stroke:#333333;}#mermaid-svg-I9xOBaXttVAqOpSx .marker.cross{stroke:#333333;}#mermaid-svg-I9xOBaXttVAqOpSx svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-I9xOBaXttVAqOpSx .mermaid-main-font{font-family:"trebuchet ms",verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-I9xOBaXttVAqOpSx .exclude-range{fill:#eeeeee;}#mermaid-svg-I9xOBaXttVAqOpSx .section{stroke:none;opacity:0.2;}#mermaid-svg-I9xOBaXttVAqOpSx .section0{fill:rgba(102, 102, 255, 0.49);}#mermaid-svg-I9xOBaXttVAqOpSx .section2{fill:#fff400;}#mermaid-svg-I9xOBaXttVAqOpSx .section1,#mermaid-svg-I9xOBaXttVAqOpSx .section3{fill:white;opacity:0.2;}#mermaid-svg-I9xOBaXttVAqOpSx .sectionTitle0{fill:#333;}#mermaid-svg-I9xOBaXttVAqOpSx .sectionTitle1{fill:#333;}#mermaid-svg-I9xOBaXttVAqOpSx .sectionTitle2{fill:#333;}#mermaid-svg-I9xOBaXttVAqOpSx .sectionTitle3{fill:#333;}#mermaid-svg-I9xOBaXttVAqOpSx .sectionTitle{text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-I9xOBaXttVAqOpSx .grid .tick{stroke:lightgrey;opacity:0.8;shape-rendering:crispEdges;}#mermaid-svg-I9xOBaXttVAqOpSx .grid .tick text{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;}#mermaid-svg-I9xOBaXttVAqOpSx .grid path{stroke-width:0;}#mermaid-svg-I9xOBaXttVAqOpSx .today{fill:none;stroke:red;stroke-width:2px;}#mermaid-svg-I9xOBaXttVAqOpSx .task{stroke-width:2;}#mermaid-svg-I9xOBaXttVAqOpSx .taskText{text-anchor:middle;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-I9xOBaXttVAqOpSx .taskTextOutsideRight{fill:black;text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-I9xOBaXttVAqOpSx .taskTextOutsideLeft{fill:black;text-anchor:end;}#mermaid-svg-I9xOBaXttVAqOpSx .task.clickable{cursor:pointer;}#mermaid-svg-I9xOBaXttVAqOpSx .taskText.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-I9xOBaXttVAqOpSx .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-I9xOBaXttVAqOpSx .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-I9xOBaXttVAqOpSx .taskText0,#mermaid-svg-I9xOBaXttVAqOpSx .taskText1,#mermaid-svg-I9xOBaXttVAqOpSx .taskText2,#mermaid-svg-I9xOBaXttVAqOpSx .taskText3{fill:white;}#mermaid-svg-I9xOBaXttVAqOpSx .task0,#mermaid-svg-I9xOBaXttVAqOpSx .task1,#mermaid-svg-I9xOBaXttVAqOpSx .task2,#mermaid-svg-I9xOBaXttVAqOpSx .task3{fill:#8a90dd;stroke:#534fbc;}#mermaid-svg-I9xOBaXttVAqOpSx .taskTextOutside0,#mermaid-svg-I9xOBaXttVAqOpSx .taskTextOutside2{fill:black;}#mermaid-svg-I9xOBaXttVAqOpSx .taskTextOutside1,#mermaid-svg-I9xOBaXttVAqOpSx .taskTextOutside3{fill:black;}#mermaid-svg-I9xOBaXttVAqOpSx .active0,#mermaid-svg-I9xOBaXttVAqOpSx .active1,#mermaid-svg-I9xOBaXttVAqOpSx .active2,#mermaid-svg-I9xOBaXttVAqOpSx .active3{fill:#bfc7ff;stroke:#534fbc;}#mermaid-svg-I9xOBaXttVAqOpSx .activeText0,#mermaid-svg-I9xOBaXttVAqOpSx .activeText1,#mermaid-svg-I9xOBaXttVAqOpSx .activeText2,#mermaid-svg-I9xOBaXttVAqOpSx .activeText3{fill:black!important;}#mermaid-svg-I9xOBaXttVAqOpSx .done0,#mermaid-svg-I9xOBaXttVAqOpSx .done1,#mermaid-svg-I9xOBaXttVAqOpSx .done2,#mermaid-svg-I9xOBaXttVAqOpSx .done3{stroke:grey;fill:lightgrey;stroke-width:2;}#mermaid-svg-I9xOBaXttVAqOpSx .doneText0,#mermaid-svg-I9xOBaXttVAqOpSx .doneText1,#mermaid-svg-I9xOBaXttVAqOpSx .doneText2,#mermaid-svg-I9xOBaXttVAqOpSx .doneText3{fill:black!important;}#mermaid-svg-I9xOBaXttVAqOpSx .crit0,#mermaid-svg-I9xOBaXttVAqOpSx .crit1,#mermaid-svg-I9xOBaXttVAqOpSx .crit2,#mermaid-svg-I9xOBaXttVAqOpSx .crit3{stroke:#ff8888;fill:red;stroke-width:2;}#mermaid-svg-I9xOBaXttVAqOpSx .activeCrit0,#mermaid-svg-I9xOBaXttVAqOpSx .activeCrit1,#mermaid-svg-I9xOBaXttVAqOpSx .activeCrit2,#mermaid-svg-I9xOBaXttVAqOpSx .activeCrit3{stroke:#ff8888;fill:#bfc7ff;stroke-width:2;}#mermaid-svg-I9xOBaXttVAqOpSx .doneCrit0,#mermaid-svg-I9xOBaXttVAqOpSx .doneCrit1,#mermaid-svg-I9xOBaXttVAqOpSx .doneCrit2,#mermaid-svg-I9xOBaXttVAqOpSx .doneCrit3{stroke:#ff8888;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges;}#mermaid-svg-I9xOBaXttVAqOpSx .milestone{transform:rotate(45deg) scale(0.8,0.8);}#mermaid-svg-I9xOBaXttVAqOpSx .milestoneText{font-style:italic;}#mermaid-svg-I9xOBaXttVAqOpSx .doneCritText0,#mermaid-svg-I9xOBaXttVAqOpSx .doneCritText1,#mermaid-svg-I9xOBaXttVAqOpSx .doneCritText2,#mermaid-svg-I9xOBaXttVAqOpSx .doneCritText3{fill:black!important;}#mermaid-svg-I9xOBaXttVAqOpSx .activeCritText0,#mermaid-svg-I9xOBaXttVAqOpSx .activeCritText1,#mermaid-svg-I9xOBaXttVAqOpSx .activeCritText2,#mermaid-svg-I9xOBaXttVAqOpSx .activeCritText3{fill:black!important;}#mermaid-svg-I9xOBaXttVAqOpSx .titleText{text-anchor:middle;font-size:18px;fill:#333;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-I9xOBaXttVAqOpSx :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 2014-01-07 2014-01-09 2014-01-11 2014-01-13 2014-01-15 2014-01-17 2014-01-19 2014-01-21 2014-01-23 2014-01-25 2014-01-27 Completed task Completed task in the critical line Implement parser and jison Describe gantt syntax Active task Create tests for parser Add gantt diagram to demo page Add another diagram to demo page Future task Future task in critical line Describe gantt syntax Add gantt diagram to demo page Add another diagram to demo page Future task2 Create tests for renderer Add to mermaid Functionality added A section Critical tasks Documentation Last section Adding GANTT diagram functionality to mermaid 甘特图通常包括以下几个要素 任务Tasks甘特图中的任务表示项目中需要完成的具体工作每个任务通常有一个名称和持续时间。开始时间和结束时间Start and End Dates每个任务在甘特图中会用条形图的形式表示其开始时间和结束时间通过条形图的长度来表示任务的持续时间。依赖关系Dependencies任务之间可能存在着前后关系或依赖关系甘特图可以通过箭头或连接线来表示任务之间的依赖关系。里程碑Milestones里程碑是项目中的重要节点或关键事件通常用一个特殊的符号或标记来表示在甘特图中。资源分配Resource Allocation甘特图可以显示每个任务分配给哪些资源或团队成员帮助项目经理进行资源调度和任务分配。 通过甘特图项目团队可以清晰地了解项目的时间安排、任务的依赖关系和进度情况帮助团队成员更好地协调工作、分配资源和优化进度。甘特图也可以用于与利益相关者进行沟通和共享项目进展情况提高项目的可视化和透明度。 8. 需求图
需求图Requirement Diagram是一种用于描述系统需求的图形化表示工具它是统一建模语言UML的一部分。需求图主要用于捕捉和可视化系统的需求帮助团队和利益相关者更好地理解和沟通需求以支持系统的设计和开发。输入
mermaid
requirementDiagramrequirement test_req {id: 1text: the test text.risk: highverifymethod: test}element test_entity {type: simulation}test_entity - satisfies - test_req输出 #mermaid-svg-JAqPEofrm6bAm9PY {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-JAqPEofrm6bAm9PY .error-icon{fill:#552222;}#mermaid-svg-JAqPEofrm6bAm9PY .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-JAqPEofrm6bAm9PY .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-JAqPEofrm6bAm9PY .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-JAqPEofrm6bAm9PY .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-JAqPEofrm6bAm9PY .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-JAqPEofrm6bAm9PY .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-JAqPEofrm6bAm9PY .marker{fill:#333333;stroke:#333333;}#mermaid-svg-JAqPEofrm6bAm9PY .marker.cross{stroke:#333333;}#mermaid-svg-JAqPEofrm6bAm9PY svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-JAqPEofrm6bAm9PY marker{fill:#333333;stroke:#333333;}#mermaid-svg-JAqPEofrm6bAm9PY marker.cross{stroke:#333333;}#mermaid-svg-JAqPEofrm6bAm9PY svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-JAqPEofrm6bAm9PY .reqBox{fill:#ECECFF;fill-opacity:100%;stroke:hsl(240, 60%, 86.2745098039%);stroke-width:hsl(240, 60%, 86.2745098039%);}#mermaid-svg-JAqPEofrm6bAm9PY .reqTitle,#mermaid-svg-JAqPEofrm6bAm9PY .reqLabel{fill:#131300;}#mermaid-svg-JAqPEofrm6bAm9PY .reqLabelBox{fill:#e8e8e8;fill-opacity:100%;}#mermaid-svg-JAqPEofrm6bAm9PY .req-title-line{stroke:hsl(240, 60%, 86.2745098039%);stroke-width:hsl(240, 60%, 86.2745098039%);}#mermaid-svg-JAqPEofrm6bAm9PY .relationshipLine{stroke:#333333;stroke-width:1;}#mermaid-svg-JAqPEofrm6bAm9PY .relationshipLabel{fill:black;}#mermaid-svg-JAqPEofrm6bAm9PY :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} Requirement test_req Id: 1 Text: the test text. Risk: High Verification: Test Element test_entity Type: simulation Doc Ref: None satisfies 需求图通常包括以下几个主要元素 1.系统System需求图的核心是系统它表示正在开发的软件系统或系统的一部分。 2. 角色Actor角色代表与系统进行交互的外部实体可以是人、组织、其他系统等。角色可以是系统的用户、管理员、第三方服务提供商等。 3. 用例Use Case用例描述了系统与角色之间的交互场景或功能需求。每个用例表示一个系统功能或一个用户故事用于描述系统对外部实体的响应和行为。 4. 关系Relationship需求图中的关系用于表示系统、角色和用例之间的关联和依赖关系。常见的关系包括关联关系、扩展关系、包含关系等。 通过需求图团队可以清晰地了解系统的功能需求、角色的参与和系统与外部实体的交互方式。需求图可以帮助团队捕捉和分析系统需求支持系统的设计和开发过程。同时需求图也可以用于与利益相关者进行沟通和共享需求以提高需求的共识和理解。 9. Git记录图
Git记录图Git commit graph是Git版本控制系统中的一种图形化表示工具用于展示代码仓库中的提交记录和分支的演变历史。Git记录图可以帮助开发者更好地理解代码仓库的变化和分支之间的关系。输入
mermaid
gitGraphcommitcommitbranch developcheckout developcommitcommitcheckout mainmerge developcommitcommit输出csdn好像无法输出可能是不支持。
Git记录图通常包括以下几个主要元素 提交节点Commit Nodes每个提交节点代表一个代码提交或一个版本的快照。提交节点通常由一串哈希值来标识它们按照时间顺序排列形成一个提交链。分支Branches分支是代码仓库中的一个独立的开发线它可以代表一个功能分支、修复分支或主线分支等。每个分支由一个指针来表示指向最新的提交节点。合并Merge合并表示将两个或多个分支的更改合并到一起。在记录图中合并通常以箭头或连接线的形式表示指示两个分支的合并点。标签Tags标签是一个有意义的名称或标记用于标识某个特定的提交节点。标签可以用来表示版本发布、重要的里程碑或稳定的快照。 通过Git记录图开发者可以清晰地了解代码仓库中的提交历史、分支的演变和合并操作。记录图可以帮助开发者追溯代码的变化、理解分支之间的关系并支持团队协作和代码版本管理。 10. C4模型图
C4模型图C4 Model是一种用于软件架构设计和可视化的简洁、层次化的模型。它由Simon Brown提出旨在帮助团队更好地理解和沟通软件系统的架构。输入
mermaid
C4Contexttitle System Context diagram for Internet Banking SystemEnterprise_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, br/ with personal bank accounts.)System(SystemAA, Internet Banking System, Allows customers to view information about their bank accounts, 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, $fontColorred, $bgColorgrey, $borderColorred)UpdateRelStyle(customerA, SystemAA, $textColorblue, $lineColorblue, $offsetX5)UpdateRelStyle(SystemAA, SystemE, $textColorblue, $lineColorblue, $offsetY-10)UpdateRelStyle(SystemAA, SystemC, $textColorblue, $lineColorblue, $offsetY-40, $offsetX-50)UpdateRelStyle(SystemC, customerA, $textColorred, $lineColorred, $offsetX-50, $offsetY20)UpdateLayoutConfig($c4ShapeInRow3, $c4BoundaryInRow1)输出csdn好像无法输出可能是不支持。
C4模型图主要包括以下四个层次 顶层上下文图System Context Diagram顶层上下文图是C4模型的最高层用于展示系统与外部实体之间的关系。它将系统作为一个黑盒与外部实体如用户、其他系统进行交互。顶层上下文图帮助团队理解系统的边界和外部依赖关系。容器图Container Diagram容器图展示了系统内部的容器Container和它们之间的关系。容器可以是物理或虚拟的如应用程序、数据库、Web服务等。容器图帮助团队理解系统的组成部分和它们之间的通信和依赖关系。组件图Component Diagram组件图展示了容器内部的组件Component和它们之间的关系。组件是系统中的功能单元可以是类、模块、库等。组件图帮助团队理解系统的内部结构和组件之间的关联。代码级别图Code Level Diagram代码级别图是C4模型的最底层用于展示组件内部的类、接口和代码级别的细节。代码级别图帮助团队理解组件的具体实现和代码之间的关系。 C4模型图的层次结构使得团队可以从高层次的概览逐步深入到系统的细节。它提供了一种简洁而直观的方式来描述和沟通软件架构帮助团队成员共享和理解系统的设计和结构。
