産業保健現場でのmermaid.jsの勧め

タイトルだけで何を話そうとしているか理解できた産業保健職（＋関連）の方、ぜひお友達になってください！ものすごく思いつき、かつ、マニアックな話題なので、興味がある人だけどうぞ（尚、嘱託というよりも専属とか常勤よりの方々にとって利益が大きいと考えられる話題になります）

mermaid.jsの紹介

mermaid.jsとは何ぞや？といいますと、「文字で図が書ける、お手軽ツール」です。

これだけだと、なんのこっちゃだと思うので、実例を挙げてみましょう。例えば、医師による長時間労働面接指導実施マニュアルにある、以下のようなフローチャートを自社でオリジナル版をつくって検討したいような場合です。

産業保健職がフローチャートを作成するツールとしては、エクセルやパワーポイントが一般的だと思いますが、これらのツールでフローチャートを作成する場合、修正することなどを考えるとかなり手間がかかります。

ところが、以下のようなテキストをかいてあげて

sequenceDiagram
    actor pt as 面接指導対象者
    actor co as 事業者
    actor dr as 医師(産業医)
    
    #
    co->>dr: 労働時間に関する情報提供
    NOTE over dr: 長時間労働者の把握
    NOTE over co: 面接指導対象者の選定<br/>・法令に基づく選定<br/>・事業所基準に基づく選定
    co->>pt: 面接指導実施の通知
    co->>pt: 事前問診票配布(様式1、様式2)
    NOTE over pt: 事前問診票記入(様式1、様式2)
    co->>dr: 面接指導対象に関する情報提供<br/>(様式4、定健結果 等)
    NOTE over dr: 面接指導実施前の</br>健康障害リスク評価
    dr->>pt: 面接指導の実施<br/>個人指導
    NOTE over pt: 指導内容の実線
    NOTE over dr: 面接内容の記録・保存（様式3）
    dr->>co: 事後措置に関する意見（様式4）
    NOTE over co: 事後措置の実施
    NOTE over co: 措置内容の記録・保存(様式4)
    co->>dr: 事後措置に関する情報提供
    NOTE over dr: 事後措置内容の確認

mermaid.jsで画像に変換してあげると、

こんな図（シーケンス図といいます）が簡単に書けてしまいます。

テキストに書いた内容はリアルタイムでプレビューを見ながら作成できるので、たたき台の作成としては非常に便利です。また、テキストの修正で図を簡単に書き換えることができるので、関係者であつまってフローについての意見出しをしても、その反映がかなり簡単にできます。

デメリットは「テキストで書く」ために少し慣れが必要な点ですが、そんなに難しくないので、もしこの時点で興味を持たれた方は続きを見てみてください。（ちなみに、mermaidも、それを書くためのソフトも無料です）

Mermaidを使うための準備

mermaid.jsを使う方法は色々ありますが、ここではVSCodeというマイクロソフトのテキストエディターを利用しましょう。

まずは、ここからVSCodeを入手して、各自のPCにインストールしてください。

VSCodeをインストールしたら、Mermaidを使うための拡張機能を追加しましょう。左端のメニューから、

をクリックして、Markdown Preview Enhanced、Markdown Preview Mermaid Support、Mermaid MarkdownSyntax Highlightの3つの拡張機能をインストールします。

インストールの手順としては、メニューの上の検索窓に入れたい拡張機能を入力して、でてきたアイコンの右横にあるInstallボタンをクリックします。

検索窓をカラにしたときに、INSTALEDに先の3つの拡張機能が表示されていれば成功です。

日本語で作業したい場合は、Japanese Language Packをインストールしておきましょう。

インストールが終わると画面の右下に、日本語に設定しますか？と質問がでてくるので、Change Language and Restartをクリックします。

簡単な図を書いてみる

まず、ファイルを用意します。ファイル→新しいテキスト ファイルをクリックします。

言語の選択をクリックすると、中央のテキストボックスにmarkdownと入力して、Markdownを選択します。

ファイル→名前をつけて保存を選択して保存しておきましょう。

ここではtest.mdと名前をつけてみました。

それで、
```mermaid
```
の間に、

次のように入力してください。

sequenceDiagram
    participant pt as 従業員
    participant dr as 産業医

    pt->>dr: 健康相談

　

重要！！

入力した結果は次の画像のような感じです。

```mermaidと```の間に図についてのコードを書くイメージです。
（Note上、しっかり```mermaid```で囲むと、コードではなくて、図が出力されてしまったため、ここ移行、すべて、```mermaid```で囲まれているとみなして読み進めてください。）

そして、右上のメニューにある、

から、

をクリックしてください。

すると、右側にプレビュー画面が表示されます。

この図（シークエンス図と呼ばれます）が、たった4行のテキストを打つだけで完成しました。

Mermaidの基本

mermaidでシーケンス図を書くためには、次の基本的な形の中にコードを書いていきます。

sequenceDiagram
 

図の記載には大きく分けて2種類の記述を行う必要があります。それが、「登場する要素の定義」と「内容」です。

登場する要素の定義

登場する要素は2種類あります。participantとactorです。次のように書いてみましょう。

sequenceDiagram
    participant kaisya
    actor dr

participantと書いた場合は、四角い箱。actorと書いた場合は人の形になります。日本語名をいきなりつけたいところですが、participant 名前 as 日本語名という書き方をすると、長い名前を何度も打ち直す必要がないので、次のようにして日本語名をつけましょう。

sequenceDiagram
    participant kaisya as 株式会社●●●
    actor dr as 産業医

どうでしょう？簡単ですね？以上が要素の定義で必要な知識です。

内容：線

ここからは線の引き方を見ていきます。線は点線とか、断端が四角なものとかいくつか書き方がありますが、この記事では矢印つきの実線と点線の二種類を紹介します。

登場する要素で英語で指定したものを->>でつなぐと実線が、-->>でつなぐと点線が描かれます。また、「:」をつけて、後ろに文字を書くことで線の上に文字を出現させることができます。

sequenceDiagram
    participant kaisya as 株式会社●●●
    actor dr as 産業医

    dr->>kaisya: 勤務
    kaisya-->>dr: 給料

いかがでしょうか？2行たしただけでこのように線を引けました。
1行が1個の線に相当します。要素1「矢印を指定する記号」要素2:「矢印の上に表示したい文字」を書けばよいイメージです

他の線も見てみましょう

sequenceDiagram
    participant kaisya as 株式会社●●●
    actor dr as 産業医

    kaisya->>dr: ->> 矢印あり実線
    kaisya->>dr: -->> 矢印あり点線 
    kaisya->dr: -> 実線
    kaisya-->dr: --> 点線
    kaisya--xdr: --x 最後がX
    kaisya--)dr: --) オープンな矢印
    

内容：ノート

次に、縦方向の線の上や左右に文字を記載する方法です。

sequenceDiagram
    participant kaisya as 株式会社●●●
    actor dr as 産業医

    dr->>kaisya: 勤務
    NOTE over dr: 働く
    kaisya->>dr:　給与
    NOTE right of kaisya: XXXX万円   

縦方向の線の上に文字を出現させたい場合は、
NOTE over 要素:表示したい文字

縦方向の線の左右に文字を表示させたい場合は、
NOTE left of 要素:表示したい文字
NOTE right of 要素: 表示したい文字
となります。

内容：改行

文字は、<br/>という記号をいれることで改行することができます。

sequenceDiagram
    participant kaisya as 株式会社●●●
    actor dr as 産業医

    dr->>kaisya: 勤務
    NOTE over dr: 働く
    kaisya->>dr:　給与
    NOTE right of kaisya: XXXX万円<br/>(内訳：AAAA、BBBBB、CCCCCC)   

もういちど過重労働のフローを見てみる

ここまでの知識で、次のフローチャートはかけてしまいます！

sequenceDiagram
    actor pt as 面接指導対象者
    actor co as 事業者
    actor dr as 医師(産業医)
    
    #
    co->>dr: 労働時間に関する情報提供
    NOTE over dr: 長時間労働者の把握
    NOTE over co: 面接指導対象者の選定<br/>・法令に基づく選定<br/>・事業所基準に基づく選定
    co->>pt: 面接指導実施の通知
    co->>pt: 事前問診票配布(様式1、様式2)
    NOTE over pt: 事前問診票記入(様式1、様式2)
    co->>dr: 面接指導対象に関する情報提供<br/>(様式4、定健結果 等)
    NOTE over dr: 面接指導実施前の</br>健康障害リスク評価
    dr->>pt: 面接指導の実施<br/>個人指導
    NOTE over pt: 指導内容の実線
    NOTE over dr: 面接内容の記録・保存（様式3）
    dr->>co: 事後措置に関する意見（様式4）
    NOTE over co: 事後措置の実施
    NOTE over co: 措置内容の記録・保存(様式4)
    co->>dr: 事後措置に関する情報提
    NOTE over dr: 事後措置内容の確認

いかがでしょうか？パワポなどで箱をコネクタでつなげて描くきれいな図には負けますが、なれると、かなり簡単に図をかくことができます。産業保健業務の図の描画のたたき台として利用する価値は大きいと思います。

尚、Marmaid、シーケンス図以外にもフローチャートの記載などもできたりするので、Mermaidと調べるともっと色々なことができます。