- [トップページへのリンク](https://www.cs.k.tsukuba-tech.ac.jp/labo/sekita/takeshita/training_alone/)
- ファイルへのリンク
    - [オリジナルのパワーポイントファイル](211004_概念作成訓練.pptx)
    - [このページのmarkdownファイル](k訓練2：図を使って説明する230315.md)

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

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

**注意**：手書きの図と、markdownで記述した図（主に[mermaid記法](https://mermaid-js.github.io/mermaid/#/)の内、特に[flowchart](https://mermaid-js.github.io/mermaid/#/./flowchart)を多用した図）の2通りを示します。  
現在、markdownによる表現は検討中のため、ここでは複数の候補を挙げています。  
また、markdownの図形表示のための記述内容も、ここではあわせて明示します。

## 1. 概念（カテゴリー）

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

### 手書きの図
[d楕円と長方形.pngへのリンク](d楕円と長方形.png)
![楕円と長方形](d楕円と長方形.png)

### markdownによる図（mermaid使用）

mermaidでは、枠の形を楕円にするには、  
識別ラベル([テキスト])  
で表します。  
ただし、**テキストの文字が制御文字等と重なって表示できない場合には、ダブルコーテーション**でくくります。
**識別ラベルは楕円内のテキストとほぼ同じにする**と、識別ラベルで参照する際にその内容のテキストを容易に類推できるようになります。  
また、**枠の形を楕円にしにくいとき（概念の入れ子構造のときなど）があり、この場合には長方形の枠の中の色を変えて**（ここでは薄ピンク色（RGB=fcf））で表すことにします。  

mermaid内の**コメント**は、%%以降がコメントとなります。
````
```mermaid
flowchart 
%% 左から右へ、観察不能1、観察不能2、観察可能1、観察可能2が並んだ図になっています。
観察不能1([観察不能1])  %%楕円枠
style 観察不能2 fill:#fcf  %%楕円枠の代わりに色を薄ピンク色にしている
観察可能1[観察可能1]  %%四角い枠を識別ラベル付きで記述
観察可能2  %%識別ラベルがないと四角い枠
```
````

```mermaid
flowchart 
%% 左から右へ、観察不能1、観察不能2、観察可能1、観察可能2が並んだ図になっています。
観察不能1([観察不能1])  %%楕円枠
style 観察不能2 fill:#fcf  %%楕円枠の代わりに枠内の色を薄ピンク色にしている
観察可能1[観察可能1]  %%四角い枠を識別ラベル付きで記述
観察可能2  %%識別ラベルがないと四角い枠
```

[上記図のmarkdownテキストへのリンク](d楕円と長方形.md)

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

### 手書きの図
[y矢印と太矢印.pngへのリンク](y矢印と太矢印.png)
![矢印と太矢印](y矢印と太矢印.png)

### markdownによる図（mermaid使用）
mermaidでは、細線と太線を区別しにくいので、細線は点線で表記することにします。  

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

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

[上記図のmarkdownテキストへのリンク](y矢印.md)

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

```
````

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

[上記図のmarkdownテキストへのリンク](f太矢印.md)


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

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

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

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

[上記図のmarkdownテキストへのリンク](k関係（四角から複数の矢印）.md)

同じ図は以下のようにも記述できますが、１行で把握できる上記の記述を推奨したいです。  

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


---

# 3. 関係

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

### 手書きの図
[k関係（四角と矢印と具体）.pngへのリンク](k関係（四角と矢印と具体）.png)  
![k関係（四角と矢印と具体）.png](k関係（四角と矢印と具体）.png)

### markdownによる図（mermaid使用）
mermaid記法では、関係の具体を明記する際は、矢印の途中に枠なしで示すことにします。  

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

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

[上記図のmarkdownテキストへのリンク](k関係（四角と矢印と具体）.md)  


---

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

### 手書きの図
[d段階.pngへのリンク](d段階（四角と太矢印）.png)  
![d段階](d段階（四角と太矢印）.png)

### markdownによる図（mermaid使用）

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

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

[markdownテキストへのリンク](d段階（四角と太矢印）.md)  

---

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

### 手書きの図
[j循環.pngへのリンク](j循環.png)  
![j循環](j循環.png)

### markdownによる図（mermaid使用）

````
```mermaid
flowchart LR
確認([確認]) ==> 計画([計画]) ==> 実行([実行]) ==> 確認
```
````

```mermaid
flowchart LR
確認([確認]) ==> 計画([計画]) ==> 実行([実行]) ==> 確認
```

[markdownテキストへのリンク](j循環.md)

同じ図は、以下のようにも記述できますが、途中で分岐のない場合には、１行で把握できる上記の記述を推奨したいです。  

````
```mermaid
flowchart LR
確認([確認]) ==> 計画([計画])
計画 ==> 実行([実行])
実行 ==> 確認
```
````

### 途中で分岐のある場合（mermaid使用）
ある概念から複数の概念に矢印がある場合（分岐のある場合）です。  
以下の例では、簡潔に示すため、観察可能な概念A～Dを用いています。  

````
```mermaid
flowchart LR
概念A .-> 概念B & 概念C
概念C .-> 概念D .-> 概念A
```
````

```mermaid
flowchart LR
概念A .-> 概念B & 概念C
概念C .-> 概念D .-> 概念A
```

[markdownテキストへのリンク](j循環と関係.md)

上記と同じ図は以下のように記述することもできますが、複雑なチャートになってくると深さを優先するのが困難になるため、概念Aが概念Bと概念Cとに影響を及ぼすことを明示することを優先し、上記の記述を推奨したいです。  

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

---

# 6. 組織図

### 手書きの図
[s組織図.pngへのリンク](s組織図.png)
![s組織図](s組織図.png)

### markdownによる図
#### 表現（その1）（mermaid使用）

上記２（概念が点線で影響を及ぼすことを表す場合）と同じ。  

````
```mermaid
flowchart
総務部 .-> 総務課 & 人事課
総務課 .-> 総務係 & 管理係 & 厚生係
人事課 .-> 人事係 & 研修係
```
````

```mermaid
flowchart
総務部 .-> 総務課 & 人事課
総務課 .-> 総務係 & 管理係 & 厚生係
人事課 .-> 人事係 & 研修係
```

[markdownテキストへのリンク](s組織図1.md)


# 7. 分類

### 手書きの図
[b分類.pngへのリンク](b分類.png)
![b分類](b分類.png)

### markdownによる図（mermaid使用）

````
```mermaid
flowchart LR

subgraph 問題

subgraph ヒト
マニュアル
end

subgraph モノ
支援機器
end

subgraph カネ
制度
end

end
```
````

```mermaid
flowchart LR

subgraph 問題

subgraph ヒト
マニュアル
end

subgraph モノ
支援機器
end

subgraph カネ
制度
end

end
```

[markdownテキストへのリンク](b分類.md)

---

# 8. 比較

### 手書きの図
[h比較.pngへのリンク](h比較.png)
![h比較](h比較.png)

### markdownによる図
#### 表現（その1）（mermaid使用）
「活用VS未活用」から、「活用」／「未活用」の2つの矢印がでて、それぞれに「メリット」／「デメリット」の矢印がでる表現。  
「活用VS未活用」の枠の形は菱形。  

````
```mermaid
flowchart
活用VS未活用{活用 VS 未活用} .-> 活用 & 未活用
活用 .-> |メリット|雇用率
活用 .-> |デメリット|マニュアル
未活用 .-> |メリット|なし
未活用 .-> |デメリット|イメージ
```
````

```mermaid
flowchart
活用VS未活用{活用 VS 未活用} .-> 活用 & 未活用
活用 .-> |メリット|雇用率
活用 .-> |デメリット|マニュアル
未活用 .-> |メリット|なし
未活用 .-> |デメリット|イメージ
```

[markdownテキストへのリンク](h比較2分割後に平行四辺形の末端.md)

#### 表現（その2）（mermaid使用）
「活用VS未活用」の枠の形を菱形にして、[活用・メリット]／[活用・デメリット]／[未活用・メリット]／[未活用・デメリット]の4つの矢印が伸びるシンプルな表現。  

````
```mermaid
flowchart
活用VS未活用{活用 VS 未活用} .->|"活用・メリット"| 雇用率
活用VS未活用 .-> |"活用・デメリット"| マニュアル
活用VS未活用 .->|"未活用・メリット"| なし
活用VS未活用 .-> |"未活用・デメリット"| イメージ
```
````

```mermaid
flowchart
活用VS未活用{活用 VS 未活用} .->|"活用・メリット"| 雇用率
活用VS未活用 .-> |"活用・デメリット"| マニュアル
活用VS未活用 .->|"未活用・メリット"| なし
活用VS未活用 .-> |"未活用・デメリット"| イメージ
```

[markdownテキストへのリンク](h比較シンプル.md)

#### 表現（その3）：（Markdownのリスト表現を使用）

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

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

[markdownテキストへのリンク](h比較リスト.md)

---
# 9. 見通し

### 手書きの図
[m見通し.pngへのリンク](m見通し.png)
![m見通し](m見通し.png)

### markdownによる図
#### 表現（その1）（mermaid使用）
mermaidにとってシンプルに表現できる journey diagram を利用。
矢印の下に顔マークがあり、下にあると困ったような顔になり、上にあるとにっこりする。

````
```mermaid
journey
section 雇用率の見通し
今:2:雇用率１％
５年後:6:雇用率３％
```
````

```mermaid
journey
section 雇用率の見通し
今:2:雇用率１％
５年後:6:雇用率３％
```

[markdownテキストへのリンク](m見通しjourney.md)

#### 表現（その2）（vega-lite使用）
点グラフのように表現。

````
```vega-lite
{
  "data": {
    "values": [
      {"時間": "今", "雇用率（％）": 1},
      {"時間": "５年後", "雇用率（％）": 3}
    ]
  },
  "mark": "circle",
  "encoding": {
    "x": {"field": "時間", "type": "ordinal"},
    "y": {"field": "雇用率（％）", "type": "quantitative",
       "scale": {"domain": [0, 5]}}
  }
 }
```
````

```vega-lite
{
  "data": {
    "values": [
      {"時間": "今", "雇用率（％）": 1},
      {"時間": "５年後", "雇用率（％）": 3}
    ]
  },
  "mark": "circle",
  "encoding": {
    "x": {"field": "時間", "type": "ordinal"},
    "y": {"field": "雇用率（％）", "type": "quantitative",
       "scale": {"domain": [0, 5]}}
  }
 }
```

[markdownテキストへのリンク](m見通し点グラフ.md)

---

# 10. 評価軸

### 手書きの図
[h評価軸.pngへのリンク](h評価軸.png)
![h評価軸](h評価軸.png)

### markdownによる図

#### 表現（その1）：（Markdownの表を使用）

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

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

[markdownテキストへのリンク](h評価軸表.md)
[エクセル（k企業の位置づけ.xlsx）へのリンク](k企業の位置づけ.xlsx)

#### 表現（その2）（vega-lite使用）
点をプロットする。

````
```vega-lite
{
  "data": {
    "values": [
      {"障害への配慮": "小", "昇進可能性": "大", "会社":"一般企業"},
      {"障害への配慮": "大", "昇進可能性": "小", "会社":"特例子会社"}
    ]
  },
  "mark": "circle",
  "encoding": {
    "x": {"field": "障害への配慮", "type": "ordinal"},
    "y": {"field": "昇進可能性", "type": "ordinal"},
    "color": {"field": "会社", "type": "nominal"}
  }
 }
```````

```vega-lite
{
  "data": {
    "values": [
      {"障害への配慮": "小", "昇進可能性": "大", "会社":"一般企業"},
      {"障害への配慮": "大", "昇進可能性": "小", "会社":"特例子会社"}
    ]
  },
  "mark": "circle",
  "encoding": {
    "x": {"field": "障害への配慮", "type": "ordinal"},
    "y": {"field": "昇進可能性", "type": "ordinal"},
    "color": {"field": "会社", "type": "nominal"}
  }
 }
```

[markdownテキストへのリンク](h評価軸点のプロット.md)


---

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

## 概念の入れ子
概念が入れ子構造のときは、大きな概念A は subgraph A から end までで記述し、
その概念に含まれるサブ概念B は subgraph A からend までの間に記述する。

### 例1
概念Aに、サブ概念a1とサブ概念a2が含まれるとき。

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

````
```mermaid
flowchart

subgraph A
a1
a2
end
```
````

```mermaid
flowchart

subgraph A
a1
a2
end
```
[markdownテキストへのリンク](g概念とサブ概念.md)

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

````
```mermaid
flowchart LR

subgraph A
a1
a2
end
```
````

```mermaid
flowchart LR

subgraph A
a1
a2
end
```
[markdownテキストへのリンク](g概念とサブ概念横.md)

### 例2
上記例1と同じ概念の関係性があり、さらに、サブ概念a1にサブサブ概念をa11が含まれるとき、**大きな概念から書く**ことを推奨したいです。

````
```mermaid
flowchart LR

subgraph A
a1
a2
end

subgraph a1
a11
end
```
````

```mermaid
flowchart LR

subgraph A
a1
a2
end

subgraph a1
a11
end
```

[markdownテキストへのリンク](g概念とサブ概念とサブサブ概念.md)

### 例3
上記例1と同じ概念の関係性があり、さらに、概念Bにサブ概念をb1, b2が含まれるとき。

````
```mermaid
flowchart

subgraph A
a1
a2
end

subgraph B
b1
b2
end
```
````

```mermaid
flowchart

subgraph A
a1
a2
end

subgraph B
b1
b2
end
```

[markdownテキストへのリンク](g概念が2つ.md)


## 概念間の関係
大局的なところから把握できるように、より大きな概念間の関係を最初に記述することを推奨したいです。

### 例4
上記例1と同じ概念の関係性があり、さらに、a1はa2に影響し、b2はb1に影響し、概念Aから概念Bに段階が移るとき。  
大局的なところから把握できるように、概念AとBとの関係を上部に記述しています。

````
```mermaid
flowchart

A ==> B

subgraph A
a1 .-> a2
end

subgraph B
b2 .-> b1
end
```
````

```mermaid
flowchart

A ==> B

subgraph A
a1 .-> a2
end

subgraph B
b2 .-> b1
end
```

[markdownテキストへのリンク](r例10概念間の関係例4.md)

### 例5
上記例4と同じ概念の関係性があるが、概念Aが他者から観察できない概念のとき。  
枠内の色を変えて、概念Aの枠が楕円形であることを表す。

````
```mermaid
flowchart

A ==> B

subgraph A
style A fill:#fcf
a1 .-> a2
end

subgraph B
b2 .-> b1
end
```
````

```mermaid
flowchart

A ==> B

subgraph A
style A fill:#fcf
a1 .-> a2
end

subgraph B
b2 .-> b1
end
```

[markdownテキストへのリンク](r例10概念間の関係例5.md)

### 例6
上記例5と同じ概念の関係性があり、さらにb2も他者から観察できない概念のとき。

#### (1) 枠内の色を変えて、b2の枠も楕円形であることを表す場合。

````
```mermaid
flowchart

A ==> B

subgraph A
style A fill:#fcf
a1 .-> a2
end

subgraph B
style b2 fill:#fcf
b2 .-> b1
end
```
````

```mermaid
flowchart

A ==> B

subgraph A
style A fill:#fcf
a1 .-> a2
end

subgraph B
style b2 fill:#fcf
b2 .-> b1
end
```

[markdownテキストへのリンク](r例10概念間の関係例6_1.md)

#### (2) b2の枠を楕円形にして表す場合。  
ただし、観察できないことを表現するのに、Aは色で、b2は形で表していて一貫性に欠ける。  

````
```mermaid
flowchart

A ==> B

subgraph A
style A fill:#fcf
a1 .-> a2
end

subgraph B
b2([b2]) .-> b1
end
```
````

```mermaid
flowchart

A ==> B

subgraph A
style A fill:#fcf
a1 .-> a2
end

subgraph B
b2([b2]) .-> b1
end
```

[markdownテキストへのリンク](r例10概念間の関係例6_2.md)

### 例7
上記例6と同じ概念の関係性があり、さらに、概念AとBは概念Cに含まれていて、概念Cから概念Dに影響があるとき以下の図となります。
ここで、構造を把握しやすくするために、AとBとの関係はCの内部のことなので、「subgraph C」の後に記述しています。

````
```mermaid
flowchart

C .-> D

subgraph C

A ==> B

subgraph A
style A fill:#fcf
a1 .-> a2
end

subgraph B
style b2 fill:#fcf
b2 .-> b1
end

end
```
````

```mermaid
flowchart

C .-> D

subgraph C

A ==> B

subgraph A
style A fill:#fcf
a1 .-> a2
end

subgraph B
style b2 fill:#fcf
b2 .-> b1
end

end
```

[markdownテキストへのリンク](r例10概念間の関係例7.md)

  
#  お問い合わせ  

### **全般**にわたる質問・相談は以下のメールアドレスにどうぞ。  
個別ワークのご相談も可能です。  
※セルフワークのモニターを募集しています。  
  
筑波技術大学 保健科学部 竹下浩    
E-Mail：takeshita＝k.tsukuba-tech.ac.jp([ = ] を [ @ ] にしてください)

### **markdown** についての質問・相談は以下のメールアドレスにどうぞ。  
  
筑波技術大学 保健科学部 情報システム学科 関田巖  
E-Mail：sekita＝cs.k.tsukuba-tech.ac.jp([ = ] を [ @ ] にしてください)