実はGitLabで使えるmermaid.js/gitlab-mermaid.js

社内LT発表資料

Transcript

1. ࣮͸GitLabͰ࢖͑Δmermaid ͰਤΛඳ͜͏ 2019/06/25 Eiichi Mita @eichisanden
2. օ͞Μɺਤɺॻ͍ͯ·͔͢ʁ
3. README.md΍WikiʹਤΛඳ ͖͍ͨͰ͢ΑͶʁ
4. """""" """"""" """"""
5. ࣮͸GitLabͷϚʔΫμ΢ϯͰਤ͕ॻ͚ΔΜͰ͚͢Ͳ ஌ͬͯ·͔ͨ͠ʁ https://about.gitlab.com/2017/12/22/gitlab-10-3-released/ Since 10.3
6. marmeid.jsͱ͸ d3.jsΛ࢖ͬͯྑ͍ײ͡ʹਤΛॻ͍ͯ͘ΕΔϥΠϒϥϦ d3.jsࣗମ͸ߴػೳͳͷͰԼهͷΑ͏ʹ৭ΜͳਤΛॻ͚Δ͚ͲɺಛఆͷਤΛίʔσΟϯά ͳ͠Ͱॻ͚ΔΑ͏ʹͨ͠Πϝʔδ https://github.com/d3/d3/wiki/Gallery
7. ɾϑϩʔνϟʔτ ɾγʔέϯεਤ ɾΨϯτνϟʔτ ɾΫϥεਤ ɾGitίϛοτάϥϑ ݱࡏॻ͚Δͷ͸5छྨ
8. ϚʔΫμ΢ϯ͕ॻ͚Δ৔ॴͳΒͲ͜Ͱ΋ॻ͚Δ ࢖͍ํ ```mermaid ͜͜ʹmermaidͷه๏Ͱॻ͖·͢ ```
9. ϑϩʔνϟʔτ graph LR; A-->B; A-->C; B-->D; C-->D; αϯϓϧ͕γϯϓϧ͍͗ͯ͢͢·ͤΜɻɻ
10. γʔέϯεਤ sequenceDiagram participant Alice participant Bob 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!
11. Ψϯτνϟʔτ 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
12. Ϋϥεਤ classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label
13. ίϛοτάϥϑ gitGraph: options { "nodeSpacing": 140, "nodeRadius": 10 } end commit branch feature checkout feature commit commit checkout master commit merge feature →experimentalͳ͚ͩ͋ͬͯɺಈ࡞͕҆ఆ͍ͯ͠ͳ͍ͷͰ஫ҙ
14. ɾϚʔΫμ΢ϯͰॻ͚Δ ɾDiff͕ݟΕΔ ɾฤूιϑτ͕͍Βͳ͍ ɾਤΛผϑΝΠϧͰ؅ཧ͠ͳͯ͘ྑ͍ ɾϒϥ΢βͰݟΕΔ ྑ͍ͱ͜Ζ
15. ɾه๏Λ֮͑ΒΕͳ͍ ɾmermaid.jsͷαΠζ͕Ͱ͔͍ ɾಈ࡞͕গ͠஗͍ ѱ͍ͱ͜Ζ
16. ͔ͤͬ͘ೖ͍ͬͯΔͷͰ࢖͍ͬͯ͜ ͏ͱࢥ͍·͢ʢ࢖ͬͯͳ͍Μ͔͍ʣ
17. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠