Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

A1
June 25, 2019

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

社内LT発表資料

A1

June 25, 2019
Tweet

More Decks by A1

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide