Markdown/Mermaid/PlantUMLでビジネスフレームワークテンプレート

:::note info
本記事のめあて
- データサイエンティスト・エンジニアにもビジネス力（ビジネスフレームワークなど）が必要
- Markdownで書くと早いしChatGPTなどとの親和性もあり生産性上がるよね

:::

以前こんな記事を書きました。

https://qiita.com/aokikenichi/items/4c7c695f2e920b892f7b

https://qiita.com/aokikenichi/items/dbcb0227eeaca252c287

https://qiita.com/aokikenichi/items/31f0dab13dce020c31de

データサイエンティストにはビジネス力が必要ですと強調しております。その一環でビジネスフレームワークについて、例えば

https://www.microsoft.com/ja-jp/office/pipc/template/result.aspx?id=13956

このテンプレートなどがPowerPointで使いやすいと思います。
ただデータサイエンティストやエンジニアなら（そしてQiitaユーザなら！）Visual Studio CodeでMarkdown書いた方が早いですよね。そしてChatGPTなどとも親和性がいい。

そこでビジネスフレームワークをMarkdownでどう表現できるかを以下に書きます。

# ①経営の戦略案を立てる: クロスSWOT
- これは単純にTableが良いかな。

~~~
|||機会|脅威|
|---|---|---|---|
|||<ul><li/>自動車産業好調<li/>投資拡大<li/>耐震需要</ul>|<ul><li/>原材料費高騰<li/>ブームの終結</ul>|
|**強み**|<ul><li/>営業種目多い</ul>|<ul><li/>一括受注<li/>早く掴む</ul>|<ul><li/>集中購買比率<li/>コスト以外の価値</ul>|
|**弱み**|<ul><li/>知名度低<li/>関西で弱い</ul>|<ul><li/>AB事業以外へPR</ul>|<ul><li/>PR<li/>他事業に</ul>|<ul><li/>定年延長<li/>OB再雇用</ul>|
~~~

|||機会|脅威|
|---|---|---|---|
|||<ul><li/>自動車産業好調<li/>投資拡大<li/>耐震需要</ul>|<ul><li/>原材料費高騰<li/>ブームの終結</ul>|
|**強み**|<ul><li/>営業種目多い</ul>|<ul><li/>一括受注<li/>早く掴む</ul>|<ul><li/>集中購買比率<li/>コスト以外の価値</ul>|
|**弱み**|<ul><li/>知名度低<li/>関西で弱い</ul>|<ul><li/>AB事業以外へPR</ul>|<ul><li/>PR<li/>他事業に</ul>|<ul><li/>定年延長<li/>OB再雇用</ul>|

# ②優先順位をつける: ペイオフマトリクス

- 改行が現状では出来ないですがMermaid/quadrantChartがよさそう

~~~
```mermaid
quadrantChart
    title XXXのペイオフマトリクス
    x-axis "難しい" --> "簡単"
    y-axis "効果小" --> "効果大"
    quadrant-1 "ボーナスチャンス"
    quadrant-2 "努力が必要"
    quadrant-3 "時間の無駄"
    quadrant-4 "すぐできる"
    "プロに進行を頼む": [0.2, 0.9]
    "資料を減らす": [0.55, 0.7]
    "ファシリテーションを全員が学ぶ": [0.8, 0.8]
    "5分前集合": [0.9, 0.2]
    "立って会議": [0.4, 0.4]
    "ITが充実した会議室": [0.2, 0.2]

```
~~~

```mermaid
quadrantChart
    title XXXのペイオフマトリクス
    x-axis "難しい" --> "簡単"
    y-axis "効果小" --> "効果大"
    quadrant-1 "ボーナスチャンス"
    quadrant-2 "努力が必要"
    quadrant-3 "時間の無駄"
    quadrant-4 "すぐできる"
    "プロに進行を頼む": [0.2, 0.9]
    "資料を減らす": [0.55, 0.7]
    "ファシリテーションを全員が学ぶ": [0.8, 0.8]
    "5分前集合": [0.9, 0.2]
    "立って会議": [0.4, 0.4]
    "ITが充実した会議室": [0.2, 0.2]

```

# ③会議に客観性を加える: PEST
- ①と同じくTable、あるいは単純に箇条書きでもよさそうだけれど
- 幅が調整を無視すればMermaid/graphとか

~~~
```mermaid
graph

    subgraph T
        t1[いいい]
        t2[ううう]
        t3[えええ]
        t1 ~~~ t2
    end
    subgraph S
        s1[ddd]
        s2[eee]
    end

    subgraph E
        e1[CCC]
        e2[あああ]
    end
    subgraph P
        p1[AAA]
        p2[BBB]
    end
    
    P ~~~ S
    E ~~~ T
```
~~~

```mermaid
graph

    subgraph T
        t1[いいい]
        t2[ううう]
        t3[えええ]
        t1 ~~~ t2
    end
    subgraph S
        s1[ddd]
        s2[eee]
    end

    subgraph E
        e1[CCC]
        e2[あああ]
    end
    subgraph P
        p1[AAA]
        p2[BBB]
    end
    
    P ~~~ S
    E ~~~ T
```

- plantuml/mindmapでもいいのかな？
~~~
```plantuml
@startmindmap
+ PEST
++ P
+++ AAA
+++ BBB
++ E
+++ CCC
+++ あああ
++ S
+++ ddd
+++ eee
++ T
+++ いいい
+++ ううう
+++ えええ
@endmindmap
```
~~~

```plantuml
@startmindmap
+ PEST
++ P
+++ AAA
+++ BBB
++ E
+++ CCC
+++ あああ
++ S
+++ ddd
+++ eee
++ T
+++ いいい
+++ ううう
+++ えええ
@endmindmap
```

# ④定例の話し合いを行う: KPT
- mermaid/graphがいいですかね

~~~
```mermaid
graph LR

    subgraph T[Try]
        subgraph PT[問題の改善のTry]
            pt1[いいい]
            pt2[ううう]
            pt3[えええ]
            pt1 ~~~ pt2
        end
        subgraph KT[続けるTry]
            kt1[甲乙]
            kt2[丙丁]
        end
    end
    subgraph P[Problem]
        s1[ddd]
        s2[eee]
        s3[ggg]
        s1 ~~~ s2
        s1 ~~~ s3
    end

    subgraph K[Keep]
        e1[CCC]
        e2[あああ]
    end
    
    P --> PT
    K --> KT
    style K fill:lightblue
    style P fill:pink
```
~~~

```mermaid
graph LR

    subgraph T[Try]
        subgraph PT[問題の改善のTry]
            pt1[いいい]
            pt2[ううう]
            pt3[えええ]
            pt1 ~~~ pt2
        end
        subgraph KT[続けるTry]
            kt1[甲乙]
            kt2[丙丁]
        end
    end
    subgraph P[Problem]
        s1[ddd]
        s2[eee]
        s3[ggg]
        s1 ~~~ s2
        s1 ~~~ s3
    end

    subgraph K[Keep]
        e1[CCC]
        e2[あああ]
    end
    
    P --> PT
    K --> KT
    style K fill:lightblue
    style P fill:pink
```

# ⑤意見をすり合わせる: プロコン
- mermaid/graphやplantuml/mindmapでも良いですが単に箇条書きで良いかな

- pros
    - いいね1
    - いいね2
- cons
    - ダメだ1
    - もうだめだ

# ⑥ブレインストーミング1: マンダラアート
- 下記マインドマップで階層を固定などすれば良いと思う
- あるいはmermaid/graphなどで

# ⑦ブレインストーミング2: マインドマップ
これはもうマインドマップそのもの
- mermaid/mindmap
    - Qiita上では階層が1つしか表現できていないバグ？

~~~
```mermaid
mindmap
O
    A
        a1
        a2
    B
        b1
    C
        c1
```
~~~

```mermaid
mindmap
O
    A
        a1
        a2
    B
        b1
    C
        c1
```
VS Codeなどでは正しく表示されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116049/13b245ef-5b9d-4e62-ba6b-ff6ab3f74132.png" width=300 />

- plantuml/mindmap
~~~
```plantuml
@startmindmap
+ O
-- A
--- a1
--- a2
-- B
--- B1
--- B2
++ C
+++ 日本語も
+++ 大丈夫
++++_ こんな表記も
++++[#lightblue] 色変更も
@endmindmap
```
~~~

```plantuml
@startmindmap
+ O
-- A
--- a1
--- a2
-- B
--- B1
--- B2
++ C
+++ 日本語も
+++ 大丈夫
++++_ こんな表記も
++++[#lightblue] 色変更も
@endmindmap
```

# ⑧課題を解決に導く: ロジックツリー
- plantuml/mindmapは両方向、片方向が選べるけれど片方向ですればそのままロジックツリー

~~~
```plantuml
@startmindmap
+ O
++ A
+++ a1
++++_ ToDoだけ
+++ a2
++++_ 表記を変えるとか
++ B
+++ B1
++++[#lightblue] 色を
+++ B2
++++[#lightblue] 変えるとか
++ C
+++ 日本語も
++++ 大丈夫
+++ なの
++++ です
@endmindmap
```
~~~

```plantuml
@startmindmap
+ O
++ A
+++ a1
++++_ ToDoだけ
+++ a2
++++_ 表記を変えるとか
++ B
+++ B1
++++[#lightblue] 色を
+++ B2
++++[#lightblue] 変えるとか
++ C
+++ 日本語も
++++ 大丈夫
+++ なの
++++ です
@endmindmap
```

# ⑨原因を追究する: 特性要因図
- ロジックツリーで代用か

# ⑩地図を使った視覚化: マップ
- これは別途Pythonやらツールで

# ⑪企業理念を打ち立てる: MVV
- Markdown系の作図ツールだとベン図を上手く書ける記法がない。krokiなどで円を描いて重ねるとかですが一旦保留
    - マインドマップかロジックツリーで代替か

# ⑫抽象的なテーマを議論する: 親和図
- mermaid/graph
    - レイアウトエンジンは選べずお任せなのでみにくい表になってしまう可能性あり
    - 見出しは長さ等により表示にに要工夫
        - subgraphのタイトルを使うか
        - ノードとして色を変えるか
- いっそロジックツリーかマインドマップで良いかと思う

~~~
```mermaid
graph
    subgraph A[" "]
        direction TB
        a0[社員の力が発揮されていない]:::label1
        subgraph A1[" "]
            a10[過剰なマネジメント]:::label2
        end
        subgraph A2[" "]
            subgraph A21[" "]
                a210[後追い仕事]:::label2
                a211
                a212
            end
            subgraph A22[" "]
                a220[市場の情報が活用度が低い]:::label2
                a221
                a222
                a210 ~~~ a221 & a222
            end
        end
        A1 --> A2
        a0 ~~~ A1 & A2
    end
    A21 <--> B
    subgraph B[" "]
        direction TB
        b0[会社の方向性が曖昧]:::label1
        subgraph B1[" "]
            direction TB
            b10[トップのリーダシップ不足]:::label2
            b11
            b12
            b10 ~~~ b11 & b12
        end
        subgraph B2[" "]
            direction TB
            b20[選択と集中が不十分]:::label2
            b21
            b22
        end
        B1 --> B2
        b0 ~~~ B1 & B2
    end
    subgraph C[" "]
        direction TB
        c0[古い体質が残っている]:::label2
        c1[ぬるま湯]
        c2[ガンバリズム]
        c0 ~~~ c1 & c2
    end
    c1 --> A22
    c2 --> B2
    classDef label1 fill:lightgreen
    classDef label2 fill:lightblue
```
~~~

```mermaid
graph
    subgraph A[" "]
        direction TB
        a0[社員の力が発揮されていない]:::label1
        subgraph A1[" "]
            a10[過剰なマネジメント]:::label2
        end
        subgraph A2[" "]
            subgraph A21[" "]
                a210[後追い仕事]:::label2
                a211
                a212
            end
            subgraph A22[" "]
                a220[市場の情報が活用度が低い]:::label2
                a221
                a222
                a210 ~~~ a221 & a222
            end
        end
        A1 --> A2
        a0 ~~~ A1 & A2
    end
    A21 <--> B
    subgraph B[" "]
        direction TB
        b0[会社の方向性が曖昧]:::label1
        subgraph B1[" "]
            direction TB
            b10[トップのリーダシップ不足]:::label2
            b11
            b12
            b10 ~~~ b11 & b12
        end
        subgraph B2[" "]
            direction TB
            b20[選択と集中が不十分]:::label2
            b21
            b22
        end
        B1 --> B2
        b0 ~~~ B1 & B2
    end
    subgraph C[" "]
        direction TB
        c0[古い体質が残っている]:::label2
        c1[ぬるま湯]
        c2[ガンバリズム]
        c0 ~~~ c1 & c2
    end
    c1 --> A22
    c2 --> B2
    classDef label1 fill:lightgreen
    classDef label2 fill:lightblue
```

# ⑬継続的な改善の提案: PDCA
リンク先資料のPDCAの使い方は違う気がする。PDCAがうまく回らない原因を探るならロジックツリーでは？

- mermaid/graph

~~~

```mermaid
graph

    subgraph Do
        D1
        D2
    end
    subgraph Check
        C1
        C2
    end
    subgraph Action
        A1
        A2
    end
    subgraph Plan
        P1
        P2
    end
    Plan --> Do --> Check --> Action --> Plan

```
~~~

```mermaid
graph

    subgraph Do
        D1
        D2
    end
    subgraph Check
        C1
        C2
    end
    subgraph Action
        A1
        A2
    end
    subgraph Plan
        P1
        P2
    end
    Plan --> Do --> Check --> Action --> Plan

```

⑭業務の改善点を見つける: プロセスマッピング
- まさにmermaid/graph(flowchart)

~~~
```mermaid
graph
    subgraph A
        direction LR
        a1[情報収集]
        a2[受注]
        a1 --> a2
        
        a3[検査]
        a4@{ shape: doc, label: "出荷" }
        a3 --> a4
    end
    a2 --> return[返品]
    a2 --> b1
    subgraph B
        b1[保管]
        b11@{ shape: comment, label: "在庫多すぎ"}
        b11 -.-> b1
    end
    b1 --> c1
    b1 -->|ボルトなど| c3
    subgraph C
        direction LR
        c1[(プレス)]
        c11@{shape: comment, label: "遅れ多発"}
        c11 -.-> c1
        c2[孔ケア]
        c3@{ shape: doc, label: "溶接" }
        c1 --> c2 --> c3
    end
    c3 --> d1
    subgraph D
        direction LR
        d1@{ shape: doc, label: "焼入" }
        d2[洗浄]
        d1 --> d2
    end
    d2 -->|運搬がムダ| a3
    A ~~~ B ~~~ C ~~~ D
    

```
~~~

```mermaid
graph
    subgraph A
        direction LR
        a1[情報収集]
        a2[受注]
        a1 --> a2
        
        a3[検査]
        a4@{ shape: doc, label: "出荷" }
        a3 --> a4
    end
    a2 --> return[返品]
    a2 --> b1
    subgraph B
        b1[保管]
        b11@{ shape: comment, label: "在庫多すぎ"}
        b11 -.-> b1
    end
    b1 --> c1
    b1 -->|ボルトなど| c3
    subgraph C
        direction LR
        c1[(プレス)]
        c11@{shape: comment, label: "遅れ多発"}
        c11 -.-> c1
        c2[孔ケア]
        c3@{ shape: doc, label: "溶接" }
        c1 --> c2 --> c3
    end
    c3 --> d1
    subgraph D
        direction LR
        d1@{ shape: doc, label: "焼入" }
        d2[洗浄]
        d1 --> d2
    end
    d2 -->|運搬がムダ| a3
    A ~~~ B ~~~ C ~~~ D
    

```

# ⑮顧客の心理に働きかける: AIDMA
- 箇条書きやTableでもよさそうだが、違った描き方でmermaid/block-beta
    - &lt;br/&gt;か¥nで改行も可能 

~~~
```mermaid
block-beta
  columns 3
  L["AIDMA"] L1["顧客の反応"] L2["企業の反応"]
  At["Attention"] at1["あれ、こんな商品が出たんだ"] at2["認知度を広げるために<br/>露出を増やして広告を打つ"]
  I["Interest"] b1["なにか、よさそうだなあ..."] b2["資料などを通じて\n顧客ニーズに合った情報を提供する"]
  D["Desire"] d1 d2
  M["Memory"] m1 m2
  Ac["Action"] ac1 ac2
```
~~~

```mermaid
block-beta
  columns 3
  L["AIDMA"] L1["顧客の反応"] L2["企業の反応"]
  At["Attention"] at1["あれ、こんな商品が出たんだ"] at2["認知度を広げるために<br/>露出を増やして広告を打つ"]
  I["Interest"] b1["なにか、よさそうだなあ..."] b2["資料などを通じて\n顧客ニーズに合った情報を提供する"]
  D["Desire"] d1 d2
  M["Memory"] m1 m2
  Ac["Action"] ac1 ac2
```

- マーケティングの世界では、AIDMAなどをカスタマージャーニーとして図解しますが、Mermaidには近いUserJourneyという図があり、それに載せてみる。
    - 階層が1つか表せないのでCustomer/Companyを横にしているため見にくいか
    - ジャーニーのどこで顧客・ユーザが好感か落胆したかなどのの指標を5段階で表す図解も可能
~~~
```mermaid
journey
    title AIDMA
    section Attention
      あれ、こんな商品が出たんだ: 5: Customer
      広告: 5: Company
    section Interest
      よさそうだ: 5: Customer
      資料提供: 5: Company
    section Desire
      De1: 5: Customer
      De2: 5: Company
    section Memory
      Me1: 5: Customer
      Me2: 5: Company
    section Action
      Ac1: 5: Customer
      Ac2: 5: Company
```
~~~



```mermaid
journey
    title AIDMA
    section Attention
      あれ、こんな商品が出たんだ: 5: Customer
      広告: 5: Company
    section Interest
      よさそうだ: 5: Customer
      資料提供: 5: Company
    section Desire
      De1: 5: Customer
      De2: 5: Company
    section Memory
      Me1: 5: Customer
      Me2: 5: Company
    section Action
      Ac1: 5: Customer
      Ac2: 5: Company
```

# 補足
## イラスト・絵文字
- リンク先資料にはイラスト集があり、Markdownなら画像は簡単に扱えるのでそれを入れるか、絵文字も可能

- Markdown用絵文字
    - https://www.folklore.place/webtools/markdown/emoji
    ```
    :tada:
    ```
    :tada:

- 日本語変換機能での絵文字
    ```
    😄
    ```
    😄

## Mermaid、PlantUML
- 以下に作図の仕様はTipsを書いております。

https://qiita.com/aokikenichi/items/cb65c546fced7d89fdfb

https://qiita.com/aokikenichi/items/8d2e3fc50a18114b38b3