Ystk(ヨシタカ)が気になったWeb制作に関する情報をメモするためのブログです。

GitLab

GitLab 10.3で追加される機能が楽しみ!

投稿日:2017年11月28日 更新日:

今月(2017年11月)のGitLab 10.2では、CE(Community Edition)向けの追加機能等が少なく個人的に残念でした。

たまにIssuesを確認したり、GitLab Directionで追加される機能を楽しみに眺めたりしてて、その中で、ずっと追いかけてた「Introduce Mermaid diagram support in markdown editor/preview」がついに10.3で追加されるということで、12月がすごく楽しみ!

mermaid.jsって何?

mermaid.jsは、チャートが作成できるJavascriptのライブラリです。
チャートと言ってもChart.jsの様なグラフ的なチャートではなく、業務フローなどの「フローチャート」、「シーケンス図」、「ガントチャート」と言ったチャートが作成できます。

mermaid.jsの何が良いかって、フローチャートやシーケンス図は、手書きで書くと後から変更したい時にすごく大変な思いをします。

それを文字列で表現出来るので、後から修正するのが楽になります。今回、GitLab 10.3で追加される事でMarkdown記法を使って、簡単に使用することが出来るようになります。

有名な「薬物依存の悪循環」をmermaid.jsで表現する

一時期コラ画像が流行った、「薬物依存の悪循環」を元にmermaid.jsでチャート図を作成してみました。


※スクリーンショットのため、文字が小さく見えないけど雰囲気だけ感じてください。

graph LR
    A((気分が良くなるよ))-->B
    B((1度だけなら))-->C
    C((使用してみる))-->D
    D((ハイになる))--薬の効力が切れると-->E
    E((薬が切れた<br>薬がもうない))--イライラ-->F
    F((早く薬を!苦しい!))--体に耐性ができて<br>次第に使用量が<br>増えていきます-->G
    G((もっともっと))-->H
    H((使用する))--一時的に欲求は<br>満たされます-->I
    I((薬で頭がいっぱい))--薬のことしか<br>考えられなくなります-->E

プロジェクトでの使用

例えば、よくあるログイン画面をシーケンス図を使って表すとこの様になります。

sequenceDiagram
    #------------------------------
    # Actors
    #------------------------------
    participant ユーザ
    participant ログイン画面
    participant データベース
    #------------------------------
    # ログイン処理
    #------------------------------
    activate ユーザ
    ユーザ->>+ログイン画面:リクエスト
    ログイン画面->>ユーザ:ログイン画面を表示
    deactivate ログイン画面
    alt ユーザ情報が存在する
        ユーザ->>+ログイン画面:ログイン情報を送信
        ログイン画面->>+データベース:ユーザ情報を参照
        データベース-->>ログイン画面:ログイン成功
        deactivate データベース
        ログイン画面-->>ユーザ:管理画面を表示
        deactivate ログイン画面
    else ユーザ情報が存在しない
        ユーザ->>+ログイン画面:ログイン情報を送信
        ログイン画面->>+データベース:ユーザ情報を参照
        データベース-->>ログイン画面:ログイン失敗
        deactivate データベース
        ログイン画面-->>ユーザ:ログイン失敗を画面表示
        deactivate ログイン画面
    end
    deactivate ユーザ

あとがき

こんな風にチャート図を作れるので、GitLabのIssueで処理の流れを示す時に便利だと思います。
文字の指示だけより、こういった簡単な図があるとイメージが付きやすく、作業の認識に差異が出にくくなると良いですね。

参考

-GitLab
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

GitLab 9.5で新ナビゲーションが使いやすくなった!

仕事で使用しているGitLabのバージョンをv9.5.0にアップデートしました! 前バージョンの9.4で導入された新ナビゲーションですが、スマートフォンでの閲覧には向いておらず、新ナビゲーションではI …

no image

GitLab 10.0がリリース!MVPに日本人の方が選ばれました!

2017年9月22日に GitLab 10.0 がリリースされました! 今月のMVPは日本人! 今回、MVPに選ばれたのは Hiroyuki Sato さんという日本人の方で、GitLab 5.1の頃 …

本番のデータベースが消え、GitLab.comのサービス停止

1月31日(水)にソースコード管理サービスを提供するGitLab.comが、管理者の操作ミスによって本番データベースのデータを誤って削除してしまい、サービス停止状態になりました。 関連記事を表示さくら …

no image

GitLabでファイルを編集すると502が表示される

GitLabをアップデートしてから、GitLab上で直接ファイルを編集してみたら502が表示されて編集ができなくなった!本当に困りました。 正直言って、1週間前くらいから気付いていたけどGitLabの …

no image

GitLabの動作が遅いのでスワップ頻度を変えてみた

今回初めて、さくらVPSの512MBプランを契約し、そのサーバにGitLabを構築して運用を開始しました。 まず、GitLabの推奨動作環境は、CPU数が2コア以上、メモリはスワップ含め4GB以上が必 …