可視化 on namaraii.com

Macと周辺機器の接続を整理しMermaidで覚え書き

hitoshi@namaraii.com (竹内仁 (TAKEUCHI Hitoshi)) — Fri, 19 Jun 2026 10:48:47 +0900

微妙に使いにくい部分があったが､面倒でずっと放置していたMacやWindows PCと周辺機器の接続を見直して結線し直した。

こういうのは書き残しておかないと､時間が経つとわからなくなるのでChatGPTにMermaidでダイアグラム化してもらう。

graph LR

 subgraph EV3895["EIZO EV3895"]
 HUB["内蔵KVM"]
 end

 WIN["Windows PC"] -->|アップストリーム| EV3895
 MAC["Mac mini"] -->|アップストリーム| EV3895

 HUB --> SCAN["ScanSnap"]
 HUB --> CAM["Webカム"]
 HUB --> MOTU["MOTU M4"]

 EV3895 --> HUB2["USB Hub"]
 MAC --> ANKER["Anker 675"]
 ANKER --> IRIG["iRig Mic Cast HD"]

 MAC --> HDD["HDD (Time Machine)"]
 MAC --> CO2["CO₂センサー"]
 MAC --> SSD["SSD (X10 Pro)"]

本当はキーボードとトラックパッドをKVMで切り替えたいところだが､机上にケーブルをはわせたくないのでBluetooth切り替えと､2.4GHzワイヤレスで接続している。

D2 Declarative Diagramming

hitoshi@namaraii.com (竹内仁 (TAKEUCHI Hitoshi)) — Thu, 12 Jan 2023 00:00:00 +0900

terrastruct/d2: D2 is a modern diagram scripting language that turns text to diagrams.

テキストからダイアグラムを生成するツール。類似のツールとしてはMermaid、GraphViz、PlantUMLなどがあり、以下のサイトでこれらのツールで同じダイアグラムを書く場合の比較が可能。このサイトはD2開発元によるものらしい。

Text to diagram

テキストと出力の例
#

公式サイトからの引用

# Actors
hans: Hans Niemann

defendants: {
 mc: Magnus Carlsen
 playmagnus: Play Magnus Group
 chesscom: Chess.com
 naka: Hikaru Nakamura

 mc -> playmagnus: Owns majority
 playmagnus <-> chesscom: Merger talks
 chesscom -> naka: Sponsoring
}

# Accusations
hans -> defendants: 'sueing for $100M'

# Offense
defendants.naka -> hans: Accused of cheating on his stream
defendants.mc -> hans: Lost then withdrew with accusations
defendants.chesscom -> hans: 72 page report of cheating

インストール
#

d2/INSTALL.md at master · terrastruct/d2

Macの場合はbrew install d2でOK

ソフトウェアアーキテクチャのためのC4モデル

hitoshi@namaraii.com (竹内仁 (TAKEUCHI Hitoshi)) — Thu, 12 Jan 2023 00:00:00 +0900

C4モデルとは
#

ソフトウェアのアーキテクチャを表現するためのモデル。

コンテキスト（context）
コンテナ（containers）
コンポーネント（components）
コード（code）で構成される。

C4モデルは特別な表記法を規定していない。以下、ダイアグラムの図はThe C4 model for visualising software architectureを参考に作成した。

flowchart TD
	ソフトウェアシステム:::system
	ソフトウェアシステム --> containerA(コンテナ)
	ソフトウェアシステム --> containerB(コンテナ)
	ソフトウェアシステム --> containerC(コンテナ)
	componentA1:::dot
	containerA:::dot --> componentA1(コンポーネント)
	componentA:::dot
 containerB --> componentA(コンポーネント)
	containerB --> componentB(コンポーネント)
	containerB --> componentC(コンポーネント)
	containerB:::container
	componentC:::dot
 	componentA2:::dot
	containerC:::dot --> componentA2(コンポーネント)
	componentB --> codeA(コード)
	componentB --> codeB(コード)
	componentB --> codeC(コード)
	componentB:::component
	codeA:::code
	codeB:::code
	codeC:::code
	classDef dot fill:#eef,stroke:#f66,stroke-width:2px,color:#aaa,stroke-dasharray: 5 5
	classDef system fill:#faa,stroke:#333,color:#fff,stroke-width:4px
	classDef container fill:#44f,stroke:#333,color:#fff,stroke-width:4px
	classDef component fill:#77f,stroke:#333,color:#fff,stroke-width:4px
	classDef code fill:#aaf,stroke:#333,color:#fff,stroke-width:4px

レベル1 システムコンテキストダイアグラム
#

対象システムが、それを使用する人や関連する他システムとの関係性、どのような位置づけにあるかを図示する。

4W1H

hitoshi@namaraii.com (竹内仁 (TAKEUCHI Hitoshi)) — Thu, 15 Dec 2022 00:00:00 +0900

利用シーン
#

目標に対して設定したアクションを具体化する。
責任分担を明確化し進捗状況をフォローする。

具体例
#

4W1HのうちWhereとHowは自明であることが多いためこの例では省略している。
「ステータス」は未着手・進捗率(パーセンテージ)・ペンディング・完了・中止などアクションの状態を表す語を定義し記述する。
「実施状況」はアクションの途中経過を日付入りで時系列に記述する。
定例会議でステータスの確認、進捗やアクションのアプローチに関するフォローアップを行うことで、確実にアクションを進める。（これが重要）

SWOT分析

hitoshi@namaraii.com (竹内仁 (TAKEUCHI Hitoshi)) — Thu, 15 Dec 2022 00:00:00 +0900

利用シーン
#

組織（個人でも良い）の戦略を検討する際に、ブレストだけでは意見が発散してしまい、統一感のある戦略にまとめあげるのが難しいケースがある。そういう場合は、SWOT分析により論点を絞り意見を共有しながら戦略に落とし込むと良い。

具体例
#

自分たちの強み(Strength)と弱み(Weakness)について列挙する。分析対象を明確にした上で(全社、部、課など）ブレストの要領で行うと良い。
外部環境を機会(Opportunities)、脅威(Threats)に分けて列挙する。
いずれも、結論を出すためのプロセスではないことを注意する。ブレスト中、いつにまにか対策の議論に入ってしまうことがあるので注意。
上で列挙した強み・弱み・機会・脅威をマトリクスにして、それぞれについて今後、何をすべきかを議論する。
議論した「何をすべきか」が確実に実行されるよう、4W1Hなどを使ってアクションプランを作成しておく。

ゴールツリー

hitoshi@namaraii.com (竹内仁 (TAKEUCHI Hitoshi)) — Thu, 15 Dec 2022 00:00:00 +0900

利用シーン
#

ゴールを明確化して発散した議論を収束する。
目的と手段を明確化する。

具体例
#

本質的な目標（ゴール）を定義する。例では「部門粗利10%アップ」を設定している。
目標を達成するための下位目標を定義する。下位目標の下にさらに下位目標があっても良い。
下位目標ごとに達成するために必要なアクションを定義する。

オポチュニティマッピング

hitoshi@namaraii.com (竹内仁 (TAKEUCHI Hitoshi)) — Thu, 15 Dec 2022 00:00:00 +0900

利用シーン
#

議論が狭い視点での各論に陥った場合、オポチュニティマッピングを使って全体をビジュアルに表すことにより、議論対象の全体像が見えてくる。

オポチュニティマッピングにまとめる対象を決めたら、対象についての戦略を考える上で必要な切り口を検討し横軸を決める。縦軸と組み合わせ、それぞれのボックスの面積により、事業機会や売上高などの大きさを表すようにする。

具体例
#

顧客A社の事業ドメインを横軸に展開する。ここではシステム開発、サービス、パッケージを設定する。
各事業ドメインの中の事業分野の大きさ（この例では売上高）を元に縦軸を設定する。この時、ボックスの面積が全事業における各事業分野の大きさを表すようにする。
この時、それぞれの大きさがわからない（公開されていない）場合があるが、その時は値を推定（仮説レベルでも良い）し、まずは書いてみる。その後、対象へのヒアリングや調査を通して、なるべく精度を高めていく。
マップが書けたら各事業分野の規模（ボックスの面積）や成長性、競合との関係などを加味し、戦略を立案する。
この例では「攻める」「守る・伸ばす」「触らない」という３つの優先度付けを行った。
オポチュニティマッピングを複数の関係者で作成することにより、対象の理解と戦略に関する共通認識が得られる。

フォースフィールド分析

hitoshi@namaraii.com (竹内仁 (TAKEUCHI Hitoshi)) — Thu, 15 Dec 2022 00:00:00 +0900

利用シーン
#

ある計画がうまくいっていない場合、その原因を人の心に作用する見えない力という視点で見える化し分析する。みんなの本音を見える化し、それぞれの力の強さを「推進力」「抵抗力」にまとめて全体を俯瞰することで、計画がうまくいかない理由を共有するとともに、改善策を検討するための論点を絞り込むことができる。

具体例
#

解決しようとするテーマを書き、その下を半分に分割し上の部分に「推進力」「抵抗力」と書く。ここでは解決しようとするテーマとして「オフショア開発が推進されない力の分析」を設定した。
ブレーンストーミングを行い、設定したテーマに対して推進する力、抵抗する力を書く。いかに本音を引き出せるかがポイント。
推進力、抵抗力ともに出そろったら、それぞれの「力」を矢印の大きさで表現する。最初の方は矢印の大きさを決めにくいが、とりあえず適当な大きさで書き、他の力との相対関係で調整する。
矢印の大きさで表現できたら、抵抗力を減少させるための方法についてブレーンストーミングする。
次に推進力を増加させるための方法、または新しい推進力が無いかブレーンストーミングする。
ブレーンストーミングした抵抗力を減少させる方法、推進力を増加させる方法が確実に実行されるよう、4W1Hなどを使ってアクションプランを作成しておく。

プロセスマッピング

hitoshi@namaraii.com (竹内仁 (TAKEUCHI Hitoshi)) — Thu, 15 Dec 2022 00:00:00 +0900

利用シーン
#

業務プロセスのムダを見つけたい場合や、問題が発生しやすい作業フローを見つけたい場合に使用する。業務プロセスを見える化しブレーンストーミングすることで、それまでは「常識として疑わなかったが実はムダな作業やプロセス」をみつけやすくなる。

具体例
#

関連する部署を書き出し、それぞれの間に線を引く。ここでは「担当者」「人事部」「移動希望部署」を設定した。
業務プロセスを構成するタスクを抽出し1つの箱として表現する。
タスクの実行順序や流れはボックス間に矢印を書いて表現する。関係部署、タスク、実行順序を把握することが目的なので、特にフォーマットにはこだわらなくて良い。
プロセスマッピングが終わったら全体を俯瞰し、改善策をブレーンストーミングする。このとき、関連部署の出席者有無が議論の精度とスピードに大きな影響を与える。このため、極力、議論できる担当者に出席してもらえるよう、事前に各部署へ要請しておくと良い。

ペイオフマトリクス

hitoshi@namaraii.com (竹内仁 (TAKEUCHI Hitoshi)) — Thu, 15 Dec 2022 00:00:00 +0900

利用シーン
#

複数の案の中から、どれを選べば良いのかで悩むことがある。そのような場合、２つの評価基準を設定し、ペイオフマトリクスで複数案の相対的ポジションを比較すると良い。

具体例
#

あるテーマに対して議論し、複数の案を出す。
案を評価するために基準を2つ設定する。ここでは「成果」と「難しさ」を設定している。
全ての案をペイオフマトリクス上へ位置付ける。
特に最初の案はどこに配置するか悩ましいが、とりあえずどこかへ配置する。
2つめ以降の案はそれまでに配置した案との相対的な関係を考慮しながら配置する。
あとから位置を動かしたくなることが多いため、ポストイットやマグネットなどを利用するとよい。
全ての案を配置したら、（この場合は）右上のものから高い優先度を付けて4W1Hなどでアクションプランを作成し、実行する。

可視化 on namaraii.com

Macと周辺機器の接続を整理しMermaidで覚え書き

D2 Declarative Diagramming

テキストと出力の例
#

インストール
#

ソフトウェアアーキテクチャのためのC4モデル

C4モデルとは
#

レベル1 システムコンテキストダイアグラム
#

4W1H

利用シーン
#

具体例
#

関連ツール
#

SWOT分析

利用シーン
#

具体例
#

ゴールツリー

利用シーン
#

具体例
#

関連ツール
#

4W1H
#

WBS
#

オポチュニティマッピング

利用シーン
#

具体例
#

フォースフィールド分析

利用シーン
#

具体例
#

プロセスマッピング

利用シーン
#

具体例
#

ペイオフマトリクス

利用シーン
#

具体例
#

可視化 on namaraii.com

Macと周辺機器の接続を整理しMermaidで覚え書き

D2 Declarative Diagramming

テキストと出力の例 #

インストール #

ソフトウェアアーキテクチャのためのC4モデル

C4モデルとは #

レベル1 システムコンテキスト ダイアグラム #

4W1H

利用シーン #

具体例 #

関連ツール #

SWOT分析

利用シーン #

具体例 #

ゴールツリー

利用シーン #

具体例 #

関連ツール #

4W1H #

WBS #

オポチュニティマッピング

利用シーン #

具体例 #

フォースフィールド分析

利用シーン #

具体例 #

プロセスマッピング

利用シーン #

具体例 #

ペイオフマトリクス

利用シーン #

具体例 #

テキストと出力の例
#

インストール
#

C4モデルとは
#

レベル1 システムコンテキストダイアグラム
#

利用シーン
#

具体例
#

関連ツール
#

利用シーン
#

具体例
#

利用シーン
#

具体例
#

関連ツール
#

4W1H
#

WBS
#

利用シーン
#

具体例
#

利用シーン
#

具体例
#

利用シーン
#

具体例
#

利用シーン
#

具体例
#