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

社内LT発表資料

Transcript

1. ࣮͸GitLabͰ࢖͑Δmermaid
   ͰਤΛඳ͜͏
   2019/06/25 Eiichi Mita @eichisanden
   

   View Slide

2. օ͞Μɺਤɺॻ͍ͯ·͔͢ʁ
   

   View Slide

3. README.md΍WikiʹਤΛඳ
   ͖͍ͨͰ͢ΑͶʁ
   

   View Slide

4. """"""
   """""""
   """"""
   

   View Slide

5. ࣮͸GitLabͷϚʔΫμ΢ϯͰਤ͕ॻ͚ΔΜͰ͚͢Ͳ
   ஌ͬͯ·͔ͨ͠ʁ
   https://about.gitlab.com/2017/12/22/gitlab-10-3-released/
   Since 10.3
   

   View Slide

6. marmeid.jsͱ͸
   d3.jsΛ࢖ͬͯྑ͍ײ͡ʹਤΛॻ͍ͯ͘ΕΔϥΠϒϥϦ
   d3.jsࣗମ͸ߴػೳͳͷͰԼهͷΑ͏ʹ৭ΜͳਤΛॻ͚Δ͚ͲɺಛఆͷਤΛίʔσΟϯά
   ͳ͠Ͱॻ͚ΔΑ͏ʹͨ͠Πϝʔδ
   https://github.com/d3/d3/wiki/Gallery
   

   View Slide

7. ɾϑϩʔνϟʔτ
   ɾγʔέϯεਤ
   ɾΨϯτνϟʔτ
   ɾΫϥεਤ
   ɾGitίϛοτάϥϑ
   ݱࡏॻ͚Δͷ͸5छྨ
   

   View Slide

8. ϚʔΫμ΢ϯ͕ॻ͚Δ৔ॴͳΒͲ͜Ͱ΋ॻ͚Δ
   ࢖͍ํ
   ```mermaid
   ͜͜ʹmermaidͷه๏Ͱॻ͖·͢
   ```
   

   View Slide

9. ϑϩʔνϟʔτ
   graph LR;
   A-->B;
   A-->C;
   B-->D;
   C-->D;
   αϯϓϧ͕γϯϓϧ͍͗ͯ͢͢·ͤΜɻɻ
   

   View Slide

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
    prevail...
    John-->Alice: Great!
    John->Bob: How about you?
    Bob-->John: Jolly good!
    

    View Slide

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
    

    View Slide

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
    

    View Slide

13. ίϛοτάϥϑ
    gitGraph:
    options
    {
    "nodeSpacing": 140,
    "nodeRadius": 10
    }
    end
    commit
    branch feature
    checkout feature
    commit
    commit
    checkout master
    commit
    merge feature
    →experimentalͳ͚ͩ͋ͬͯɺಈ࡞͕҆ఆ͍ͯ͠ͳ͍ͷͰ஫ҙ
    

    View Slide

14. ɾϚʔΫμ΢ϯͰॻ͚Δ
    ɾDiff͕ݟΕΔ
    ɾฤूιϑτ͕͍Βͳ͍
    ɾਤΛผϑΝΠϧͰ؅ཧ͠ͳͯ͘ྑ͍
    ɾϒϥ΢βͰݟΕΔ
    ྑ͍ͱ͜Ζ
    

    View Slide

15. ɾه๏Λ֮͑ΒΕͳ͍
    ɾmermaid.jsͷαΠζ͕Ͱ͔͍
    ɾಈ࡞͕গ͠஗͍
    ѱ͍ͱ͜Ζ
    

    View Slide

16. ͔ͤͬ͘ೖ͍ͬͯΔͷͰ࢖͍ͬͯ͜
    ͏ͱࢥ͍·͢ʢ࢖ͬͯͳ͍Μ͔͍ʣ
    

    View Slide

17. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide