$30 off During Our Annual Pro Sale. View Details »

実は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

  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. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠