Diagramming Bliss with Mermaid

Transcript

1. Tech Talk Tokyo #3 2016-07-05 Diagramming Bliss with Mermaid Yves-Eric Martin CTO, MediWeb, Inc © 2016 MediWeb, Inc. 1
2. “One Picture is Worth 1,000 Words” Napoleon © 2016 MediWeb, Inc. 2
3. Many diagramming tools » Package software » Visio » OmniGraffle » ArgoUML... » Online services » Draw.io » Google Drawings... © 2016 MediWeb, Inc. 3
4. All the same weaknesses » Time consuming » Hard to change » Binary or low level formats » The source is useless » Cannot diff © 2016 MediWeb, Inc. 4
5. Sample © 2016 MediWeb, Inc. 5
6. Introducing: Mermaid © 2016 MediWeb, Inc. 6
7. Introducing: Mermaid “Generation of diagram and flowchart from text in a similar manner as markdown” © 2016 MediWeb, Inc. 7
8. What can Mermaid do » Flowcharts » Sequence diagrams » Gantt charts © 2016 MediWeb, Inc. 8
9. Flowchart ↓ SourceɹɹɹɹɹɹɹRender → graph TD; A-->B; A-->C; B-->D; C-->D; © 2016 MediWeb, Inc. 9
10. Sequence Diagram ↓ SourceɹɹɹɹɹɹɹRender → sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fights hypochondria end Note right of John: Rational thinking John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good! © 2016 MediWeb, Inc. 10
11. Gantt Chart ↓ SourceɹɹɹɹɹɹɹRender → gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid 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 section Critical tasks Completed task in the critical line :crit, done, 2014-01-06,24h Implement parser and jison :crit, done, after des1, 2d Create tests for parser :crit, active, 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :1d © 2016 MediWeb, Inc. 11
12. The Power of Text © 2016 MediWeb, Inc. 12
13. The Power of Text » Fast and easy » Write out your thoughts directly » No time wasted fiddling » Put under source control and diff away © 2016 MediWeb, Inc. 13
14. What is Mermaid for » Quick diagramming, brainstorming » Documentation » Change tracking What is Mermaid not for » Marketing material » Precise control of layout © 2016 MediWeb, Inc. 14
15. Easy to start 1.Install Atom (free text editor from GitHub) 2.Install the atom-mermaid package 3.There is no 3! Start writing some Mermaid and press: ctrl + option + o (Mac) ctrl + alt + o (Windows) © 2016 MediWeb, Inc. 15
16. Real Use Example graph TD subgraph New Sytem ns_script[Script] end subgraph Old System other_export[Export] end subgraph Bridge Script bridge_api[API] Upload end subgraph Hybrid hybrid_export[Export] hybrid_api[API] end subgraph Cloud ule[UL Endpoint] DB((Database)) datae[Data Endpoint] cloud_api[API] dle[DL] Enc/Dec s3 end other_export--File-->Upload hybrid_export--File-->Upload Script-->hybrid_api hybrid_api-->Script Script--Data-->bridge_api ns_script--Data-->bridge_api Upload--File-->ule bridge_api--Data-->datae ule--File-->Enc/Dec ule--Parsing-->DB Enc/Dec---s3((AWS S3)) Enc/Dec-->dle datae-->DB DB-->cloud_api cloud_api-->onlineservices[Ϋϥ΢υαʔϏε] dle-->dashboard[Dashboard] cloud_api-.->dashboard Let's try it! © 2016 MediWeb, Inc. 16
17. Real Use Example graph TD subgraph New Sytem ns_script[Script] end subgraph Old System other_export[Export] end subgraph Bridge Script bridge_api[API] Upload end subgraph Hybrid hybrid_export[Export] hybrid_api[API] end subgraph Cloud ule[UL Endpoint] DB((Database)) datae[Data Endpoint] cloud_api[API] dle[DL] Enc/Dec s3 end other_export--File-->Upload hybrid_export--File-->Upload Script-->hybrid_api hybrid_api-->Script Script--Data-->bridge_api ns_script--Data-->bridge_api Upload--File-->ule bridge_api--Data-->datae ule--File-->Enc/Dec ule--Parsing-->DB Enc/Dec---s3((AWS S3)) Enc/Dec-->dle datae-->DB DB-->cloud_api cloud_api-->onlineservices[Ϋϥ΢υαʔϏε] dle-->dashboard[Dashboard] cloud_api-.->dashboard © 2016 MediWeb, Inc. 17
18. “1,001 words is worth more than a picture.” John McCarthy © 2016 MediWeb, Inc. 18
19. Please try Mermaid. https://knsv.github.io/mermaid/ The end, thank you! © 2016 MediWeb, Inc. 19