トップページへのリンク
ファイルへのリンク
- オリジナルのパワーポイントファイル
- このページのmarkdownファイル

訓練メニュー2：図を使って説明する。

ここでは、概念（カテゴリー）やその関係を、図を使って表現・説明する訓練を行います。
触図でなくて申し訳ありません。
もしも可能であれば、周囲の晴眼者に、どんな図が表示されているか説明してもらってください。

注記：手書きの図と、markdownで記述した図（チャート）（主にMermaid記法の内、flowchartを用いたチャート）の2通りを示します。
現在、Markdownによるチャート表現は検討中のため、ここでは複数の候補を挙げています。
より理解しやすい方法を選んでもらう質問も入っています。方法の番号をメモしていただき、メールまたは掲示板等で教えていただけると助かります。

1. 概念（カテゴリー）

概念（カテゴリー）は楕円と長方形で表します。
楕円は、他者が観察不可能な概念（カテゴリー）を表し、長方形は、他者が観察可能な概念（カテゴリー）を表します。枠の中に、概念（カテゴリー）の内容を明記します。

手書きの図

d楕円と長方形.pngへのリンク

Markdownによる図（Mermaidのflowchartを使用）

Mermaidのflowchartでは、概念（カテゴリー）の内容をテキストで記述するだけで、そのままで四角い枠で囲まれます。
同じ内容のテキストを別のものとして使いたいときや、テキストに制御文字などがありダブルコーテーションでくくりたいときなどでは、は、識別ラベル付きで表します。つまり、
識別ラベル[テキスト]
で表します。

テキストを楕円の枠で囲むためには、
識別ラベル([テキスト])
とします。

ただし、テキストの文字が制御文字等と重なって表示できない場合には、ダブルコーテーションでくくります。

識別ラベルは楕円内のテキストとほぼ同じにすると、識別ラベルで参照する際に枠内の内容を容易に類推できるようになります。

また、枠の形を楕円にしにくいとき（概念の入れ子構造のときなど）があり、この場合には長方形の枠の中の色を変えて（ここでは薄ピンク色（RGB=fcf））で表すことにします。

mermaid内のコメント行は、
%%
から始めます。

四角い枠または楕円で囲まれたテキストの例

flowchart 
%% 左から右へ、観察不能1、観察不能2、観察可能1、観察可能2が並んだ図になっています。

%%楕円枠
観察不能1([観察不能1])

%%楕円枠の代わりに背景色を薄ピンク色にしている
style 観察不能2 fill:#fcf  

%%四角い枠を識別ラベル付きで記述
観察可能1[観察可能1]

%%識別ラベルがないと四角い枠
観察可能2

上記の各種概念を表す図のMermaidコード

```mermaid
flowchart 
%% 左から右へ、観察不能1、観察不能2、観察可能1、観察可能2が並んだ図になっています。

%%楕円枠
観察不能1([観察不能1])

%%楕円枠の代わりに背景色を薄ピンク色にしている
style 観察不能2 fill:#fcf  

%%四角い枠を識別ラベル付きで記述
観察可能1[観察可能1]

%%識別ラベルがないと四角い枠
観察可能2
```

2. 矢印と太矢印

矢印は、その向きに概念が影響を及ぼすことを表します。
太矢印は、その向きに概念が移行すること（段階が移行すること）を表します。

手書きの図

y矢印と太矢印.pngへのリンク

Markdownによる図（Mermaidのflowchartを使用）

mermaidでは、細線と太線を見た目で区別しにくいので、細線は点線で表記することにします。

flowchart LR
概念A .-> 概念B

上記の点線矢印を表す図のMermaidコード

```mermaid
flowchart LR
概念A .-> 概念B
```

flowchart LR
概念A ==> 概念B

上記の太線矢印を表す図のMermaidコード

```mermaid
flowchart LR
概念A ==> 概念B

```

1つの概念から複数の概念に影響があるとき（Mermaidのflowchartを使用）

概念Aから、概念Bと概念Cに、影響があるとき

方法2-1

flowchart LR
%% 方法2-1
概念A .-> 概念B & 概念C

上記方法2-1のMermaidコード

```mermaid
%% 方法2-1
flowchart LR
概念A .-> 概念B & 概念C
```

方法2-2

同じ図は、概念Aを２回用いた２行で、以下のようにも記述できます。

方法2-2のMermaidコード


```mermaid
flowchart LR
%% 方法2-2
概念A .-> 概念B
概念A .-> 概念C
```

質問１

方法2-1のコードと方法2-2のコードとで、どちらが理解しやすいでしょうか？

3. 関係

概念の影響の具体を明示する際は、矢印の近くに記述します。

手書きの図

k関係（四角と矢印と具体）.pngへのリンク

Markdownによる図（Mermaidのflowchartを使用）

mermaid記法では、関係の具体を明記する際は、矢印の途中に枠なしで示すことにします。

flowchart LR
課長 .-> |指示| 私

上記の関係明示図のMermaidコード

```mermaid
flowchart LR
課長 .-> |指示| 私
```

4. 段階

太矢印は段階の遷移を表します。

手書きの図

d段階.pngへのリンク
d段階

Markdownによる図（Mermaidのflowchartを使用）

flowchart LR
初心者 ==> 熟練者

上記の段階明示図のMermaidコード

```mermaid
flowchart LR
初心者 ==> 熟練者
```

5. 循環

矢印で遷移した先が再び自身に戻ってくることです。

手書きの図

j循環.pngへのリンク
j循環

Markdownによる図（Mermaidのflowchartを使用）

方法5-1-1

%% 方法5-1-1
flowchart LR
確認([確認]) ==> 計画([計画]) ==> 実行([実行]) ==> 確認

上記の方法5-1のMermaidコード

```mermaid
%% 方法5-1-1
flowchart LR
確認([確認]) ==> 計画([計画]) ==> 実行([実行]) ==> 確認
```

方法5-1-2

同じ図は、矢印による遷移を１行で１回だけにして、複数行で以下のようにも記述できます。

矢印による遷移を１行１回だけにする方法5-2のMermaidコード

```mermaid
%% 方法5-1-2
flowchart LR
確認([確認]) ==> 計画([計画])
計画 ==> 実行([実行])
実行 ==> 確認
```

１つの概念から２つの概念に影響があり、そのうちの片方だけから矢印が伸びる場合

概念Aから概念Bと概念Cに影響がある場合で、そのうち概念Cだけから矢印が概念Dに伸びる例です。

方法5-2-1

以下の例では、可能な限り方法5-1を採用しています。また、簡潔に示すため、概念は観察可能（四角枠）としています。

%% 方法5-2-1
flowchart LR
概念A .-> 概念B & 概念C
概念C .-> 概念D .-> 概念A

方法5-1を採用した上記方法5-2-1のMermaidコード

```mermaid
%% 方法5-2-1
flowchart LR
概念A .-> 概念B & 概念C
概念C .-> 概念D .-> 概念A
```

方法5-2-2

上記と同じ図は、方法5-1-2を採用すると、以下の方法5-2-2で記述することもできます。

方法5-1-2を採用した方法5-2-2のMermaidコード

```mermaid
%% 方法5-2-2
flowchart LR
概念A .-> 概念B
概念A .-> 概念C
概念C .-> 概念D
概念D .-> 概念A
```

質問2

方法5-2-1と方法5-2-2とで、どちらが理解しやすいでしょうか？

6. 組織図

手書きの図

s組織図.pngへのリンク

Markdownによる図

方法6-1 (Plantumlのmindmap使用)

Plantumlのmindmapで、左をトップ、右をボトムとする木構造の図を表現できます。
Plantumlでのコメントは、シングルコーテーションを行の先頭に書きます。

' 方法6-1
@startmindmap
* 総務部
** 総務課
** 人事課
@endmindmap

方法6-1のPlantumlコード

```plantuml
' 方法6-1
@startmindmap
* 総務部
** 総務課
** 人事課
@endmindmap
```

方法6-2 (Mermaidのflowchartを使用)

%% 方法6-2
flowchart
総務部 .-> P1(("・")) .-> 総務課 & 人事課

方法6-2のMermaidコード

```mermaid
%% 方法6-2
flowchart
総務部 .-> P1(("・")) .-> 総務課 & 人事課
```

7. 分類

手書きの図

b分類.pngへのリンク b分類

Markdownによる図

ここでは、複数要素を示すために、例として、「ヒト」には「マニュアル」と「資料」の両方が分類されているものとしています。

方法7-1（PlantUMLの配置図を使用）

' 方法7-1
@startuml
card 問題
card ヒト
card モノ
card カネ
card マニュアル資料[
マニュアル
----
資料]
card 支援機器
card 制度
問題 =[hidden]= ヒト
問題 =[hidden]=	モノ
問題 =[hidden]=	カネ
ヒト =[hidden]=	マニュアル資料
モノ =[hidden]=	支援機器
カネ =[hidden]=	制度
@enduml

PlantUMLコード

```plantuml
' 方法7-1
@startuml
card 問題
card ヒト
card モノ
card カネ
card マニュアル資料[
マニュアル
----
資料]
card 支援機器
card 制度
問題 =[hidden]= ヒト
問題 =[hidden]=	モノ
問題 =[hidden]=	カネ
ヒト =[hidden]=	マニュアル資料
モノ =[hidden]=	支援機器
カネ =[hidden]=	制度
@enduml
```

方法7-2（PlantUMLの配置図を使用）

上記図では要素間の線は見えませんが、点線で示すこともできます。

' 方法7-2
@startuml
card 問題
card ヒト
card モノ
card カネ
card マニュアル資料[
マニュアル
----
資料]
card 支援機器
card 制度
問題 ~~	ヒト
問題 ~~	モノ
問題 ~~	カネ
ヒト ~~	マニュアル資料
モノ ~~	支援機器
カネ ~~	制度
@enduml

PlantUMLコード

```plantuml
' 方法7-2
@startuml
card 問題
card ヒト
card モノ
card カネ
card マニュアル資料[
マニュアル
----
資料]
card 支援機器
card 制度
問題 ~~	ヒト
問題 ~~	モノ
問題 ~~	カネ
ヒト ~~	マニュアル資料
モノ ~~	支援機器
カネ ~~	制度
@enduml
```

方法7-3（PlantUMLの配置図を使用）

要素の枠の形は、角が少し丸い四角でしたが、別の形にもできます。 cardをfileに書き換えると以下のようになります。

' 方法7-3
@startuml
file 問題
file ヒト
file モノ
file カネ
file マニュアル資料[
マニュアル
----
資料]
file 支援機器
file 制度
問題 =[hidden]=	ヒト
問題 =[hidden]=	モノ
問題 =[hidden]=	カネ
ヒト =[hidden]=	マニュアル資料
モノ =[hidden]=	支援機器
カネ =[hidden]=	制度
@enduml

PlantUMLコード

```plantuml
' 方法7-3
@startuml
file 問題
file ヒト
file モノ
file カネ
file マニュアル資料[
マニュアル
----
資料]
file 支援機器
file 制度
問題 =[hidden]=	ヒト
問題 =[hidden]=	モノ
問題 =[hidden]=	カネ
ヒト =[hidden]=	マニュアル資料
モノ =[hidden]=	支援機器
カネ =[hidden]=	制度
@enduml
```

方法7-4（PlantUMLの配置図を使用）

nodeに書き換えると以下のようになります。

' 方法7-4
@startuml
node 問題
node ヒト
node モノ
node カネ
node マニュアル資料[
マニュアル
----
資料]
node 支援機器
node 制度
問題 =[hidden]=	ヒト
問題 =[hidden]=	モノ
問題 =[hidden]=	カネ
ヒト =[hidden]=	マニュアル資料
モノ =[hidden]=	支援機器
カネ =[hidden]=	制度
@enduml

PlantUMLコード

```plantuml
' 方法7-4
@startuml
node 問題
node ヒト
node モノ
node カネ
node マニュアル資料[
マニュアル
----
資料]
node 支援機器
node 制度
問題 =[hidden]=	ヒト
問題 =[hidden]=	モノ
問題 =[hidden]=	カネ
ヒト =[hidden]=	マニュアル資料
モノ =[hidden]=	支援機器
カネ =[hidden]=	制度
@enduml
```

方法7-5（箇条書き）

markdownの箇条書きリストを使用すると以下のようになります。

問題

ヒト
- マニュアル
- 資料
モノ
- 支援機器
カネ
- 制度

Markdown箇条書きのコード

問題
- ヒト
  - マニュアル
  - 資料
- モノ
  - 支援機器
- カネ
  - 制度

質問3

竹下先生へ：組織図、分類、比較の図で最低限みたさなければならない条件は何でしょうか？
（何をもって、組織図、分類図、比較図とが区別されるのでしょうか？）

8. 比較

手書きの図

h比較.pngへのリンク h比較

Markdownによる図

活用時のメリットの項目として、上記 h比較.png には「雇用率」だけでしてが、項目が増えたときにどうなるかを示すために、「助成金」も追加したものを表示します。

方法8-1（PlantUMLのmindmap使用）

PlantUMLのmindmapを使用しています。「雇用率」や「マニュアル」など、項目に対する枠は示さないようにしており、各項目の先頭には「・」をつけています。

' 方法8-1
@startmindmap
* 活用
** メリット
***_ ・雇用率
***_ ・助成金
** デメリット
***_ ・マニュアル
* 未活用
** メリット
***_ ・なし
** デメリット
***_ ・イメージ
@endmindmap

PlantUMLコード

```plantuml
' 方法8-1
@startmindmap
* 活用
** メリット
***_ ・雇用率
***_ ・助成金
** デメリット
***_ ・マニュアル
* 未活用
** メリット
***_ ・なし
** デメリット
***_ ・イメージ
@endmindmap
```

方法8-2（Mermaidのflowchartを使用）

「比較」というラベルのついたsubgraphを用います。

「雇用率」や「マニュアル」など、項目の先頭には「*」をつけていますが、その他、「-」「+」「#」などに置き換えることができます。「・」や「＊」にすると、項目名をダブルコーテーションでくくる必要が出ます。

%% 方法8-2
flowchart TD
subgraph 比較
活用 .- Kメリット1([メリット]) .- *雇用率 & *助成金
活用 .- Kデメリット([デメリット]) .- *マニュアル
未活用 .- Mメリット([メリット]) .- *なし
未活用 .- Mデメリット([デメリット]) .- *イメージ
end

Mermaidコード


```mermaid
%% 方法8-2
flowchart TD
subgraph 比較
活用 .- Kメリット1([メリット]) .- *雇用率 & *助成金
活用 .- Kデメリット([デメリット]) .- *マニュアル
未活用 .- Mメリット([メリット]) .- *なし
未活用 .- Mデメリット([デメリット]) .- *イメージ
end  
```

方法8-3（Mermaidのflowchartを使用）

「活用 VS 未活用」の枠の形を菱形にして、「活用」や「未活用」への矢印を出し、その後、各項目までは、矢印の途中に「メリット」または「デメリット」が示された矢印を用いた表現です。
「雇用率」や「マニュアル」など、項目の先頭の記号の表記は省略しています。

%% 方法8-3
flowchart
活用VS未活用{活用 VS 未活用} .-> 活用 & 未活用
活用 .-> |メリット|雇用率
活用 .-> |メリット|助成金
活用 .-> |デメリット|マニュアル
未活用 .-> |メリット|なし
未活用 .-> |デメリット|イメージ

Mermaidコード

```mermaid
%% 方法8-3
flowchart
活用VS未活用{活用 VS 未活用} .-> 活用 & 未活用
活用 .-> |メリット|雇用率
活用 .-> |メリット|助成金
活用 .-> |デメリット|マニュアル
未活用 .-> |メリット|なし
未活用 .-> |デメリット|イメージ
```

方法8-4（Mermaidのflowchartを使用）

「活用 VS 未活用」の枠の形を菱形にして、その後、各項目までは、矢印の途中に「活用・メリット」または「活用・デメリット」または「未活用・メリット」または「未活用・デメリット」が示された矢印を用いた表現です。

%% 方法8-4
flowchart
活用VS未活用{活用 VS 未活用} .->|"活用・メリット"| 雇用率 & 助成金
活用VS未活用 .-> |"活用・デメリット"| マニュアル
活用VS未活用 .->|"未活用・メリット"| なし
活用VS未活用 .-> |"未活用・デメリット"| イメージ

Mermaidコード

```mermaid
%% 方法8-4
flowchart
活用VS未活用{活用 VS 未活用} .->|"活用・メリット"| 雇用率 & 助成金
活用VS未活用 .-> |"活用・デメリット"| マニュアル
活用VS未活用 .->|"未活用・メリット"| なし
活用VS未活用 .-> |"未活用・デメリット"| イメージ
```

方法8-5（Mermaidのflowchartを使用）

ひし形の「活用 VS 未活用」から、矢印の途中に「活用」または「未活用」が示された矢印が、それぞれのひし形の「メリット VS デメリット」に向かう表現です。その後、矢印の途中に「メリット」または「デメリット」が途中に示された矢印が、それぞれの項目に向かいます。

flowchart
%% 方法8-5
活用VS未活用{"活用
VS
未活用"} .-> |活用|メリットVSデメリット1{"メリット
VS
デメリット"}
活用VS未活用 .-> |未活用|メリットVSデメリット2{"メリット
VS
デメリット"}
メリットVSデメリット1 .-> |メリット|雇用率 & 助成金
メリットVSデメリット1 .-> |デメリット|マニュアル
メリットVSデメリット2 .-> |メリット|なし
メリットVSデメリット2 .-> |デメリット|イメージ

Mermaidコード

```mermaid
%% 方法8-5
flowchart
活用VS未活用{"活用<br>VS<br>未活用"} .-> |活用|メリットVSデメリット1{"メリット<br>VS<br>デメリット"}
活用VS未活用 .-> |未活用|メリットVSデメリット2{"メリット<br>VS<br>デメリット"}
メリットVSデメリット1 .-> |メリット|雇用率 & 助成金
メリットVSデメリット1 .-> |デメリット|マニュアル
メリットVSデメリット2 .-> |メリット|なし
メリットVSデメリット2 .-> |デメリット|イメージ
```

方法8-6（Markdownの箇条書きを使用）

Markdownの箇条書きを使用した表現です。最初に、「比較」という見出しを付けています。

比較

活用
- メリット
  - 雇用率
  - 助成金
- デメリット
  - マニュアル
未活用
- メリット
  - なし
- デメリット
  - イメージ

Markdownコード

比較
<!-- 方法8-6 -->
- 活用
    - メリット
         - 雇用率
         - 助成金
    - デメリット
         - マニュアル
- 未活用
    - メリット
         - なし
    - デメリット
         - イメージ

方法8-7（Mermaidのflowchartを使用）

上記では、「活用」の「メリット」には２つの項目があり、項目ごとに線を伸ばしてシンプルに表記していましたが、２つの項目をまとめて表現することもできます。

上記方法8-2は、以下のように表現できます。

%% 方法8-7 （方法8-2の別表現）
flowchart TD
subgraph 比較
活用 .- Kメリット([メリット]) .- 雇用率助成金["*雇用率
*助成金"]
活用 .- Kデメリット([デメリット]) .- *マニュアル
未活用 .- Mメリット([メリット]) .- *なし
未活用 .- Mデメリット([デメリット]) .- *イメージ
end

Mermaidコード

```mermaid
%% 方法8-7 （方法8-2の別表現）
flowchart TD
subgraph 比較
活用 .- Kメリット([メリット]) .- 雇用率助成金["*雇用率<br>*助成金"]
活用 .- Kデメリット([デメリット]) .- *マニュアル
未活用 .- Mメリット([メリット]) .- *なし
未活用 .- Mデメリット([デメリット]) .- *イメージ
end  
```

方法8-8（Mermaidのflowchartを使用）

さらに、「メリット」「デメリット」も項目にまとめて表現すると、以下のように表記できます。

%% 方法8-8 （方法8-7をさらにまとめた表現）
flowchart TD
subgraph 比較
活用 .- Kメリット([メリット
*雇用率
*助成金])
活用 .- Kデメリット([デメリット
*マニュアル])
未活用 .- Mメリット([メリット
*なし])
未活用 .- Mデメリット([デメリット
*イメージ])
end

Mermaidコード

```mermaid
%% 方法8-8 （方法8-7をさらにまとめた表現）
flowchart TD
subgraph 比較
活用 .- Kメリット([メリット<br>*雇用率<br>*助成金])
活用 .- Kデメリット([デメリット<br>*マニュアル])
未活用 .- Mメリット([メリット<br>*なし])
未活用 .- Mデメリット([デメリット<br>*イメージ])
end  
```

方法8-9（Mermaidのflowchartを使用）

方法8-3の項目「雇用率」と「助成金」を１つの枠内にまとめた表現です。

%% 方法8-9（方法8-3の別表現）
flowchart
活用VS未活用{活用 VS 未活用} .-> 活用 & 未活用
活用 .-> |メリット|雇用率助成金["雇用率
助成金"]
活用 .-> |デメリット|マニュアル
未活用 .-> |メリット|なし
未活用 .-> |デメリット|イメージ

Mermaidコード

```mermaid
%% 方法8-9（方法8-3の別表現）
flowchart
活用VS未活用{活用 VS 未活用} .-> 活用 & 未活用
活用 .-> |メリット|雇用率助成金["雇用率<br>助成金"]
活用 .-> |デメリット|マニュアル
未活用 .-> |メリット|なし
未活用 .-> |デメリット|イメージ
```

方法8-10（Mermaidのflowchartを使用）

方法8-5の項目「雇用率」と「助成金」を１つの枠内にまとめた表現です。

%% 方法8-10（方法8-5の別表現）
flowchart
活用VS未活用{"活用
VS
未活用"} .-> |活用|メリットVSデメリット1{"メリット
VS
デメリット"}
活用VS未活用 .-> |未活用|メリットVSデメリット2{"メリット
VS
デメリット"}
メリットVSデメリット1 .-> |メリット|雇用率助成金["雇用率
助成金"]
メリットVSデメリット1 .-> |デメリット|マニュアル
メリットVSデメリット2 .-> |メリット|なし
メリットVSデメリット2 .-> |デメリット|イメージ

Mermaidコード

```mermaid
%% 方法8-10（方法8-5の別表現）
flowchart
活用VS未活用{"活用<br>VS<br>未活用"} .-> |活用|メリットVSデメリット1{"メリット<br>VS<br>デメリット"}
活用VS未活用 .-> |未活用|メリットVSデメリット2{"メリット<br>VS<br>デメリット"}
メリットVSデメリット1 .-> |メリット|雇用率助成金["雇用率<br>助成金"]
メリットVSデメリット1 .-> |デメリット|マニュアル
メリットVSデメリット2 .-> |メリット|なし
メリットVSデメリット2 .-> |デメリット|イメージ
```

質問4

Q4-1　上記の「7.分類」「8.比較」の各種方法の中で、竹下先生が許容できる表現は何でしょうか？

Q4-2　許容できる表現のうち、推奨したい順番はどうなるでしょうか？

9. 見通し

手書きの図

m見通し.pngへのリンク

Markdownによる図

さらなる見通しの図示を示すために、「？年後」に「雇用率５％」を追加しています。

方法9-1（Mermaidのjourneyを使用）

Mermaidのjourney diagram を使用することでシンプルに表記しています。矢印で時間的推移を表し、その下にある顔マークの位置と表情で、値の高さが表現されます。

%% 方法9-1
journey
section 雇用率の推移
今:1:雇用率１％
５年後:3:雇用率３％
？年後:5:雇用率５％

Mermaidコード

```mermaid
%% 方法9-1
journey
section 雇用率の見通し
今:1:雇用率１％
５年後:3:雇用率３％
？年後:5:雇用率５％
```

方法9-2（PlantUMLの配置図を使用）

PlantUMLの配置図を使用し、「雇用率１％」を楕円枠で表し、「今」などを四角い枠で表しました。
それらの配置は、例えば、「雇用率１％」の下に点線で「今」　が来るように指定しました。また、「雇用率１％」の上に太線で「雇用率３％」が来ることと、「今」の右に見えない線で「５年後」が来ることの両方を指定することで、「雇用率１％」の右上に「雇用率３％」が表現されています。

' 方法9-2
@startuml
usecase "雇用率１％"
usecase "雇用率３％"
usecase "雇用率５％"
rectangle "今"
rectangle "５年後"
rectangle "？年後"
"雇用率１％" .d. "今"
"雇用率３％" .d. "５年後"
"雇用率５％" .d. "？年後"
"雇用率１％" =u=> "雇用率３％" 
"雇用率３％" =u=> "雇用率５％" 
"今" --r[hidden] "５年後"
"５年後" --r[hidden] "？年後"
@enduml

Mermaidコード

```plantuml
' 方法9-2
@startuml
usecase "雇用率１％"
usecase "雇用率３％"
usecase "雇用率５％"
rectangle "今"
rectangle "５年後"
rectangle "？年後"
"雇用率１％" .d. "今"
"雇用率３％" .d. "５年後"
"雇用率５％" .d. "？年後"
"雇用率１％" =u=> "雇用率３％" 
"雇用率３％" =u=> "雇用率５％" 
"今" --r[hidden] "５年後"
"５年後" --r[hidden] "？年後"
@enduml
```

10. 評価軸

手書きの図

h評価軸.pngへのリンク

Markdownによる図

方法10-1（MermaidのQuadrantChartを使用）

MermaidのQuadrantChartを使用して、４つの象限を作って表記します。

%% 方法10-1
quadrantChart
    title 配慮と昇進
    x-axis "配慮が小" --> "配慮が大"
    y-axis "昇進の可能性が小" --> "昇進の可能性が大"
    "一般企業": [0.25, 0.75]
    "特例子会社": [0.75, 0.25]

Mermaidコード

```mermaid
%% 方法10-1
quadrantChart
    title 配慮と昇進
    x-axis "配慮が小" --> "配慮が大"
    y-axis "昇進の可能性が小" --> "昇進の可能性が大"
    "一般企業": [0.25, 0.75]
    "特例子会社": [0.75, 0.25]
```

方法10-2（Markdownの表を使用）

	配慮が小	配慮が大
昇進の可能性が大	一般企業
昇進の可能性が小		特例子会社

Markdownの表のコード

<!-- 方法10-2 -->
| |配慮が小|配慮が大|
|-|:-:|:-:|
|**昇進の可能性が大**|一般企業|　|
|**昇進の可能性が小**|　|特例子会社|

エクセル（k企業の位置づけ.xlsx）へのリンク

11. 複合図：入れ子の概念と、概念間の関係

概念の入れ子

概念が入れ子構造のときは、Mermaidのflowchartのsubgraphを用いて表現します。大きな概念から書くことを推奨します。

例11-1

概念Aが、サブ概念a1とサブ概念a2を含むときの例です。

方法11-1-1

概ね縦長の図にするとき（必ずしも縦長になるとは限らない）は、 flowchar のままにするか、flowchart TD とします。 TD は、Top to Down の意味です。

%% 方法11-1-1
flowchart

subgraph A
a1
a2
end

Mermaidコード

```mermaid
%% 方法11-1-1
flowchart

subgraph A
a1
a2
end
```

方法11-1-2

上記図と同値な表現ですが、概ね横長の図にするとき（必ずしも横長になるとは限らない）には、 flowchart LR とします。 LR は、Left to Right の意味。

%% 方法11-1-2
flowchart LR

subgraph A
a1
a2
end

Mermaidコード

```mermaid
%% 方法11-1-2
flowchart LR

subgraph A
a1
a2
end
```

例11-2

概念Aはサブ概念a1とa2を含み、さらに、サブ概念a1がサブサブ概念a11を含むときです。主に以下の２つの方法があります。

方法11-2-1

%% 方法11-2-1
flowchart LR

subgraph A
a1
a2
end

subgraph a1
a11
end

Mermaidコード

```mermaid
%% 方法11-2-1
flowchart LR

subgraph A
a1
a2
end

subgraph a1
a11
end
```

方法11-2-2

入れ子関係をトップの図中に展開して記述する方法です。

Mermaidコード

```mermaid
%% 方法11-2-2
flowchart LR

subgraph A
subgraph a1
a11
end
a2
end
```

質問5

上記の方法11-2-1と方法11-2-2とで、どちらのほうが理解しやすいでしょうか？
図の複雑度に応じて、理解し易い記述方法が変化するかもしれませんけれども。

概念間の関係

要素をすべて示した後に、要素間の関係を大局的な順に示す以下の方法11-3-1を推奨します。ただし、関係が局所的であれば、関係を先に示す方法11-3-2もわかりやすいと思います。

ここでのコードは、方法11-2-1の方針で表記しています。

方法11-3-1

概念Aはa1とa2を含み、概念Bはb1とb2を含み、概念Aから概念Bに段階が移り、a1はa2に影響し、b2はb1に影響するときです。

%% 方法11-3-1
flowchart

subgraph A
a1
a2
end

subgraph B
b1
b2
end

A ==> B
a1 .-> a2
b2 .-> b1

Mermaidコード

```mermaid
%% 方法11-3-1
flowchart

subgraph A
a1
a2
end

subgraph B
b1
b2
end

A ==> B
a1 .-> a2
b2 .-> b1
```

方法11-3-2

上記方法11-3-1と同じ図ですが、a1とa2の関係や、 b1とb2の関係が局所的のため、局所的な関係をsubgraph内に展開して示した例です。

Mermaidコード

```mermaid
%% 方法11-3-2
flowchart

subgraph A
a1 .-> a2
end

subgraph B
b2 .-> b1
end

A ==> B
```

質問6

上記の方法11-3-1と方法11-3-2とで、どちらのほうが理解しやすいでしょうか？
図の複雑度に応じて、理解し易い記述方法が変化するかもしれませんけれども。

例11-4

上記例11-3-1と同じ概念の関係性がありますが、概念Aが他者から観察できない概念のときです。
subgraphの枠の形を変えられないので、枠内の色を変えて、概念Aの枠が楕円形であることを表します。

ここでのコードは方法11-3-1の方針を採用しています。

%% 方法11-4
flowchart

subgraph A
style A fill:#fcf
a1
a2
end

subgraph B
b1
b2
end

A ==> B
a1 .-> a2
b2 .-> b1

Mermaidコード

```mermaid
%% 方法11-4
flowchart

subgraph A
style A fill:#fcf
a1
a2
end

subgraph B
b1
b2
end

A ==> B
a1 .-> a2
b2 .-> b1
```

例11-5

上記例11-4と同じ概念の関係性がありますが、更に概念b1が他者から観察できない概念のときです。
サブ概念b1の枠の形を変えられますが、枠内の色を変えて、サブ概念b1の枠が楕円形であることを表します。

ここでのコードは方法11-3-1の方針を採用しています。

%% 方法11-5
flowchart

subgraph A
style A fill:#fcf
a1
a2
end

subgraph B
b1
style b1 fill:#fcf
b2
end

A ==> B
a1 .-> a2
b2 .-> b1

Mermaidコード

```mermaid
%% 方法11-5
flowchart

subgraph A
style A fill:#fcf
a1
a2
end

subgraph B
b1
style b1 fill:#fcf
b2
end

A ==> B
a1 .-> a2
b2 .-> b1
```

お問い合わせ

Markdown についての質問・相談は以下のメールアドレスにどうぞ。

筑波技術大学保健科学部情報システム学科関田巖
E-Mail：sekita＝cs.k.tsukuba-tech.ac.jp([ = ] を [ @ ] にしてください)

トレーニング全般にわたる質問・相談は以下のメールアドレスにどうぞ。

個別ワークのご相談も可能です。
※セルフワークのモニターを募集しています。

筑波技術大学保健科学部竹下浩
E-Mail：takeshita＝k.tsukuba-tech.ac.jp([ = ] を [ @ ] にしてください)