Stack Map新人 Web エンジニアの地図

設計書や README には、図がよく出てきます。
現場でよく見る 9 つの図を、同じ例(打刻の修正申請)で描きました。読み方のこつと、図を文字で書く方法(Mermaid)も。

現場でよく見る図

図を押すと、何を表すか・使う場面・読み方のこつが出ます。例はどれも、打刻の修正申請(社員が申請して、上長が承認か差し戻しをする)です。図と Mermaid のコードは、切り替えて見られます。

図を文字で書く(Mermaid)

Mermaid は、決まった書き方の文字から図を描く道具です。GitHub は、Markdown の中に書いた Mermaid を、そのまま図にして見せてくれます。

UML は古い?

「UML」という言葉は、最近あまり聞かないかもしれません。けれど、その中の図は今も使われています。

UML とは

図の描き方を決めた規格です。決めているのは OMG という団体で、最新は 2017 年 12 月の 2.5.1 です。

このタブの中の UML の図

シーケンス図・状態遷移図・クラス図・ユースケース図・アクティビティ図(業務フロー)は、UML で決められた図です。

全部を覚えなくてよい 考え方のヒント

規格の細かい決まりより、チームで記号の意味がそろっていることの方が大事です。現場でよく出る図の「読み方」から覚えて、描くときは Mermaid のような書き方に合わせれば、まず困りません。

C4 モデル(構成図を 4 つの段で描く)

システムの構成図を、地図を拡大するように 4 つの段に分けて描くやり方です。話す相手に合わせて、段を選びます。考え方のヒント

    AI 時代AI と図

    図は、AI に描かせやすく、読ませやすいものの 1 つです。ただし、確かめるのは人です。考え方のヒント

    チェックリスト

    図を描いたら、確かめたものに印を付けてください(この端末にだけ残ります)。考え方のヒント