精华内容
下载资源
问答
  • Mermaid

    2019-09-28 13:53:47
    graph TD; A-->B; A-->C; B-->D; C-->D; 转载于:https://www.cnblogs.com/xintiao9/p/11327596.html
    graph TD; A-->B; A-->C; B-->D; C-->D;

    转载于:https://www.cnblogs.com/xintiao9/p/11327596.html

    展开全文
  • Support Mermaid

    2020-12-08 21:05:05
    <div><p>Add support for the <a href="https://knsv.github.io/mermaid/">Mermaid</a> diagram generator. - Integrate via the <a href="https://knsv.github.io/mermaid/#mermaid-cli">Mermaid CLI - Allow the ...
  • mermaid Mermaid was nominated and won the JS Open Source Awards (2019) in the category "The most exciting use of technology"!!! Thanks to all involved, people committing pull requests, ...
  • Mermaid formatting

    2020-11-27 03:14:56
    <div><p>I tried the GANTT examples of mermaid (http://knsv.github.io/mermaid/gantt.html) or subgraph. In general it works. But black background with black arrows does not look nice. Try this: <pre>...
  • 支持 Mermaid

    2020-11-22 03:21:10
    <div><p><a href="https://knsv.github.io/mermaid/#mermaid">Mermaid</a> 支持以下三种: - Flowcharts - Sequence diagrams - Gant diagrams 文档:https://mermaidjs.github.io/</p><p>该提问来源于...
  • Mermaid support

    2020-11-29 06:21:10
    <div><p>How can I use kramdown with mermaid code blocks? <p>I am trying to implement this for fixing https://github.com/ethereum/EIPs/issues/2450 </p> <p>I tried finding a way of making a custom ...
  • Mermaid类图

    2021-01-19 16:56:49
    Mermaid类图 博客原文 英文原文 Class Diagram 类图用于面向对象对于应用结构概念建模, 也用于把具体的模型翻译成程序代码. 类图也可以用于数据建模 mermaid渲染: #mermaid-svg-zruYZVT1C8bmcQOP .label{font-family...

    Mermaid类图

    博客原文
    英文原文 Class Diagram

    类图用于面向对象对于应用结构概念建模, 也用于把具体的模型翻译成程序代码. 类图也可以用于数据建模

    mermaid渲染:

    Animal+int age+String gender+isMammal()+mate()Duck+String beakColor+swim()+quack()Fish-int sizeInFeet-canEat()Zebra+bool is_wild+run()

    语法

    类结构

    顶部代表类名称, 中部代表类成员变量, 底部代表类成员函数

    classDiagram
    class BankAccount {
        +String ower
        +Bigdecimal balance
        +deposit(amount)
        +withdraw(amount)
    }
    
    BankAccount+String ower+Bigdecimal balance+deposit(amount)+withdraw(amount)

    定义类

    • 显示声明: class Animal
    • 通过关系声明 Vehicle <|-- Car
    classDiagram
    class Animal
    Vehicle <|-- Car
    
    AnimalVehicleCar

    定义类的成员

    包括了属性和方法, 还有额外信息

    区分方法和属性的决定性符号是(), 定义类成员有两种办法

    • 类外定义
    classDiagram
    class Dog
    Dog : +String name
    Dog : +bark()
    Dog : +eat(food) bool
    
    Dog+String name+bark()+eat(food) : bool
    • 类内部定义, 用大括号
    classDiagram
    class Dog {
        +String name
        +bark()
        +eat(food) bool
    }
    
    Dog+String name+bark()+eat(food) : bool

    返回值

    返回值在右括号后面添加

    泛型类型

    泛型用~代替两个尖括号

    classDiagram
    class Squre~Shape~{
        int id
        List~int~ position
        setPoints(List~int~ points)
        getPoints() List~int~
    }
    
    Squre<Shape>int idList<int> positionsetPoints(List<int> points)getPoints() : List<int>

    可见性

    类成员的可见性有四种:

    • + public
    • - private
    • # protected
    • ~ package/internal

    还有静态和虚函数

    • * abstract: someAbstractMethod()*
    • $ static: someStaticMethod()$

    定义关系

    主要语法:

    [classA][Arrow][ClassB]:LabelText
    

    不同箭头代表的意思:

    类型 描述
    <¦– (Inheritance)继承
    *-- (Composition)组合
    o-- (Aggregation)聚合
    --> (Association)关联
    -- (Link)实线连接
    ..> (Dependency)依赖
    …¦> (Realization)实现
    .. (Link)虚线连接
    classDiagram
    classA <|-- classB : Inheritance
    classC *-- classD : Composition
    classE o-- classF : Aggregation
    classG <-- classH : Association
    classI -- classJ : Link
    classK <.. classL : Dependency
    classM <|.. classN : Realization
    classO .. classP : Link
    
    classAclassBclassCclassDclassEclassFclassGclassHclassIclassJclassKclassLclassMclassNclassOclassPInheritanceCompositionAggregationAssociationLinkDependencyRealizationLink

    把箭头反向也可以用

    多重和乘数关系

    一般用在Link关系上, 表示类间的关系

    • 1 只有1个
    • 0..1 0个或1个
    • 1..* 1个或多个
    • * 多个
    • n n个{n>1}
    • 0..n 0~n {n>1}
    • 1..n 1~n {n>1}

    样式(也可以在引号内写自己的文本):

    [classA] "cardinality1" [arrow] "cardinality2" [classB]:LabelText
    
    classDiagram
    Customer "1" --> "*" Ticket
    Student "1" --> "1..*" Course
    Glaxy --> "many" Star : Contains
    
    CustomerTicketStudentCourseGlaxyStar1*11..*Containsmany

    类的注解

    对类进行文本标识像元信息, 对性质进行清晰的指示, 例如:

    • <<interface>> 接口类
    • <<abstract>> 抽象类
    • <<service>> 服务类
    • <<enumeration>> 枚举

    在单独的行声明:

    classDiagram
    class Shape{
        draw()*
    }
    <<interface>> Shape
    
    «interface»Shapedraw()

    在类内部:

    classDiagram
    class Shape{
        <<interface>>
        draw()*
        count()$
        size()
    }
    
    class Color{
        <<enumeration>>
        RED
        BLUE
        GREEN
        WHITE
        BLACK
    }
    
    «interface»Shapedraw()count()size()«enumeration»ColorREDBLUEGREENWHITEBLACK

    注释

    mermaid注释用%%开头

    交互

    绑定鼠标点击事件到浏览器: Interaction

    展开全文
  • Update mermaid

    2020-12-02 12:30:43
    <div><p>I wanted to be able to use the latest feature of mermaid and an older version was in use.</p><p>该提问来源于开源项目:hedgedoc/hedgedoc</p></div>
  • Mermaid diagrams

    2020-12-04 14:32:15
    <div><p>Hi <p>Any plans on mermaid support? <p>https://mermaidjs.github.io/usage.html</p><p>该提问来源于开源项目:shime/livedown</p></div>
  • mermaid工具

    万次阅读 2018-10-30 17:04:54
    mermaid是一款开源的画流程图、甘特图、时序图工具,她提供了一种类似markdown的语法来创建各种图。 官网:https://mermaidjs.github.io/ 在线编辑器:here 1、入门 我们先试用mermaid提供的在线编辑器,来熟悉...

    mermaid是一款开源的画流程图、甘特图、时序图工具,她提供了一种类似markdown的语法来创建各种图。

    官网:https://mermaidjs.github.io/

    在线编辑器:here

    1、入门

    我们先试用mermaid提供的在线编辑器,来熟悉一下mermaid的各种画图语法;

    1)流程图

    2)时序图:

    sequenceDiagram
    A->> B: Query
    B->> C: Forward query
    Note right of C: Thinking...
    C->> B: Response
    B->> A: Forward response

    效果如下:

    3)甘特:

    gantt
    dateFormat  YYYY-MM-DD
    title Shop项目交付计划
    
    section 里程碑 0.1 
    数据库设计          :active,    p1, 2016-08-15, 3d
    详细设计            :           p2, after p1, 2d
    
    section 里程碑 0.2
    后端开发            :           p3, 2016-08-22, 20d
    前端开发            :           p4, 2016-08-22, 15d
    
    section 里程碑 0.3
    功能测试            :       p6, after p3, 5d
    上线               :       p7, after p6, 2d
    交付               :       p8, afterp7, 2d

    效果如下

    2、使用:

    1)mermaid提供了nodejs方式,在命令行上使用:

    由于 mermaid 使用 nodejs 写的,所以需要 node 环境,这个不多说,根据自己的平台安装好 node 即可。安装 mermaid :

    npm install -g phantomjs && npm install -g mermaid

    完成之后,就可以使用命令行了。先新建一个文本文件,我们这里就来展示一个甘特图,命名 demo.ganttdemo.gantt 文件内容就用上面的甘特图的例子,然后使用命令:

    mermaid demo.gantt -w 1920 -s -p -o images

    就可以在 images 目录下生成两个文件,一个是 PNG 图片,另一个是 SVG 矢量图。

    可以用 mermaid -h 命令查看帮助,这里我贴上刚刚那条命令里用到的参数:

    -s --svg       输出 SVG 替代 PNG(试验性的功能)。
    -p --png       如果选择保存 SVG,那么加上这个选项可以同时保存 PNG。
    -o --outputDir 保存文件的目录(如果不存在会自动创建),默认 `cwd`。
    -w --width     生成的 PNG 图片宽度。

    2)整合进 Markdown:

    忽略

    3)在html中使用:

    官网上有很多例子可以参考https://unpkg.com/mermaid/ ,这里简单写一个

    <!DOCTYPE html>
    <html>
    <head>
    <script src="./mermaid.js"></script>
    </head>
    <body>
    
    
    <div class="firstTest">
       graph LR;
        A--合并-->B;
        A-->C;
        B-->D;
        C-->D;
    </div>
    <script>     
     mermaid.init({noteMargin: 10}, ".firstTest");
    </script>
    
    
    </body>
    </html>
    

    效果:

    展开全文
  • Mermaid语法

    千次阅读 2020-06-10 17:20:34
    文章目录Mermaid8.5版本中的新图表有关8.2版本的特别记录图表流程图顺序图甘特图类图-实验阶段Git图表-实验阶段实体关系图-试验阶段安装CDNNode.js原版文档孪生项目寻求帮助针对参与者安装编译Lint测试发布信任 ...

    Mermaid

    在这里插入图片描述

    使用Markdown语法以相同的规则从纯文本生成图标和流程图。

    当你说明代码时否曾想简化文档编写并避免使用像visio一样繁杂庞大的工具?

    这就是mermaid产生的原因,一个简单的类Markdown脚本语言,其通过javascript从纯文本中产生图表。

    查看mermaid整合方式和使用方法的列表。

    **Mermaid was nominated and won the JS Open Source Awards (2019) in the category “The most exciting use of technology”!!! Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project. **

    Mermaid被提名并赢得了2019年The most exciting use of technologyJS Open Source奖金。感谢所有参与、提交PR、回答问题并特别感谢Tyler Long帮助我们一直保持这个项目。

    8.5版本中的新图表

    在8.5版本中修复了一些bug和做了一个提升,添加了一个新的图表类型,实体关系图表

    在这里插入图片描述

    有关8.2版本的特别记录

    在版本8.2中引入了一个安全性改进。引入了securityLevel配置,该配置用于设置在一个已经解析的图表上使用的信任级别。

    • true:默认,文本中的标签被编码,点击功能失效
    • false:文本中的标签被允许使用,点击功能被允许使用

    关闭的问题:

    注意:这将更改mermaid默认行为,在升级至8.2版本后如果没有配置securityLevel,则流程图中的标签将被编码为标记,并禁用单击功能。

    如果你的应用程序对图源安全性负责,则可以设置securityLevel。通过再次设置可以使单击和标签功能再次被允许。

    mermaidAPI.initialize({
        securityLevel:'loose'
    });
    

    图表

    流程图

    graph TD;
    	A --> B;
    	A --> C;
    	B --> D;
    	C --> D;
    

    在这里插入图片描述

    顺序图

    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!
    

    在这里插入图片描述

    甘特图

    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
    

    在这里插入图片描述

    类图-实验阶段

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

    在这里插入图片描述

    Git图表-实验阶段

    gitGraph:
    options
    {
    	"nodeSpacing": 150,
    	"nodeRadius": 10
    }
    end
    commit
    branch newbranch
    checkout newbranch
    commit
    commit
    checkout master
    commit
    commit
    merge newbranch
    

    在这里插入图片描述

    实体关系图-试验阶段

    erDiagram
    	CUSTOMER ||--o{ ORDER : Places
    	ORDER ||--||{ LINE-ITEM : contains
    	CUSTOMER }|.|{ DELIVERY-ADDRESS : uses
    

    在这里插入图片描述

    安装

    CDN

    https://unpkg.com/mermaid@<version>/dist/

    使用准备使用的版本号替换<version>,例如https://unpkg.com/mermaid@7.10/dist/

    Node.js

    yarn add mermaid

    原版文档

    https://mermaidjs.github.io

    孪生项目

    寻求帮助

    事情比较多,我很难跟上。如果我们能够为了解决这个问题,组建一个核心的开发人员团队在未来与mermaid发展合作,这将是很棒的。

    作为开发团队的一员,你将会获得对存储库的写权限,并且可以在回答问题和issues时代表本项目。

    我们可以一起工作的内容:

    • 添加更多像脑图、ert图等类型的图表
    • 提升已经存在的图表类型

    如果你想参与其中,请随时和我联系。

    针对参与者

    安装

    yarn install

    编译

    yarn build:watch

    Lint

    yarn lint

    我们使用eslint。我们推荐你安装编辑器插件以便于你能够获得实时的lint结果。

    测试

    yarn test

    在浏览器中的测试手册:打开dist/index.html

    发布

    对于那些拥有权力取发布的人:

    package.json更新版本号。

    npm publish

    上述命令会在文件夹dist内产生文件,并将他们发布到npmjs.org

    信任

    Many thanks to the d3 and dagre-d3 projects for providing the graphical layout and drawing libraries!

    Thanks also to the js-sequence-diagram project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering.

    Mermaid was created by Knut Sveidqvist for easier documentation.

    Tyler Long has became a collaborator since April 2017.

    ter for inspiration and starting point for gantt rendering.

    Mermaid was created by Knut Sveidqvist for easier documentation.

    Tyler Long has became a collaborator since April 2017.

    Here is the full list of the projects contributors.

    展开全文
  • mermaid-demo

    2018-10-30 17:07:32
    mermaid是一款开源的画流程图、时序图、甘特度的工具,提供了命令行和html两种使用方法。本例是在html中使用mermaid画出各种图的例子。
  • mermaid not found

    2020-12-09 07:57:00
    <div><p>I guess this issue is more like that i didn't install something properly but i don't know what i have to install. after this command: ...raghur/mermaid-filter</p></div>
  • Mermaid 实用教程

    万次阅读 多人点赞 2018-03-04 22:38:04
    Mermaid 实用教程 Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库,使用 JS 进行本地渲染,广泛集成于许多 Markdown 编辑器中。 之前用过 PlantUML,但是发现这个东西的实现原理是生成 UML 的图片后上传...
  • Add Mermaid support

    2020-11-27 11:37:33
    It will allow drawing mermaid diagrams (sequence, flow, gantt, structure) from markdown. If implemented we could use only Atom for writing design documentation.</p><p>该提问来源于开源项目:atom...
  • 设置在NexT主题下,需要进入NexT主题配置_config.yml搜索mermaid并且打开功能开关相关mermaid文件位于\themes\next\layout\_third-party\tagsmermaid theme位于在Markdown的Fontmatter中加入mermaid: true入门最简单...
  • Markdown Mermaid

    2019-05-14 09:02:00
    Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库,使用 JS 进行本地渲染,广泛集成于许多 Markdown 编辑器中。 之前用过 PlantUML,但是发现这个东西的实现原理是生成 UML 的图片后上传服务端,每次再从...
  • configure mermaid diagram

    2020-12-31 22:18:13
    <div><p>Would it be possible to configure somehow the mermaid diagram? <p>I'm thinking specifically about the mirrorActor(s?) option in <a href="https://mermaidjs.github.io/sequenceDiagram.html">...
  • Mermaid 学习

    2018-07-25 21:01:00
    在 VS code 中安装插件 Markdown Preview Mermaid Support,则便可支持 Mermaid 流程图 flowchart graph LR; A-->B; A-->C; B-->D; C-->D; 时序图 sequence diagram sequenceDiagram  participant ...
  • Support mermaid diagrams

    2020-12-02 15:56:01
    ~~~mermaid sequenceDiagram Alice->>John: Hello John, how are you? John-->>Alice: Great! ~~~ </code></pre> <p>would create such image <img alt="mermaid-graph" src=...
  • Enhancement: Mermaid

    2020-11-29 04:13:04
    Please consider adding <a href="https://github.com/knsv/mermaid">Mermaid</a> to your solution for some out-of-the-box diagramming. <p>Cheers</p><p>该提问来源于开源项目:pbek/QOwnNotes</p></div>
  • <div><p>Apparently, mermaid broke some time ago and the graphs in <a href="https://rust-lang.github.io/chalk/book/what_is_chalk.html">what_is_chalk.md</a> and ...The first graph in each file is not ...
  • mermaid 教程

    千次阅读 2018-01-04 23:36:37
    作者:黄永刚mermaid简介当撰写文档的时候,对于流程图的生成大多使用Visio等繁重的工具,没有一种轻便的工具能够画图从而简化文档的编写,就像markdown那样。mermaid解决这个痛点,这是一个类似markdown语法的脚本...
  • Mermaid rendering broken

    2020-11-28 06:34:35
    <p>when i open below markdown file which contains two mermaid graphs, haroopad v 0.13.1 (Mac OSX) renders it just fine. As soon as i start editing the second mermaid graph (changing one line title) ...
  • Markdown Mermaid 流程图语法笔记,以及 GitHub、Hexo-Next-Theme 和相关编辑器的支持一切从简,少用图,多用流程图Markdown语法Mermaid 语法代码块选择 mermaid 语言sequenceDiagramsequenceDiagramAlice->...
  • mermaid 用法

    千次阅读 2018-01-04 23:31:36
    作者:黄永刚 ...mermaid简介 ...当撰写文档的时候,对于流程图的生成大多使用...mermaid解决这个痛点,这是一个类似markdown语法的脚本语言,通过JavaScript实现图表的生成。 先来看个例子: 1.流程图(flowch
  • Mermaid Live Editor

    2020-06-07 14:06:45
    Mermaid Live Editor
  • markdown mermaid-crx插件

    2021-04-02 06:30:27
    语言:中文 (简体) markdown-mermaid-plugin Markdown Viewer 插件增强,在该插件的基础上解析markdown文档中mermaid格式的代码块,将其转换为相应的图形展示到页面上。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,782
精华内容 1,112
热门标签
关键字:

mermaid