【Scrapbox活用Sample】なぜ、NISA・新NISAは非課税(Modify a Diagram with Scrapbox)

 ## overview

• 本投稿では、Scrapboxにて、知識・情報管理を行う中で、Scrapboxのイメージ表示、図表示、図の描画機能を活用する方法を、検討する。

• 利用するサイト、ツールは、以下。知恵袋サイトは、題材のサンプルとして利用。

  • Scrapbox - 次世代Wikiサービス

    • 拡張UserScript  - mermaid

      • Awesome Font表示

    • Scrapbox標準Drawing Tool

  • Gyazo - 画像管理・共有サービス

  • Canva ‐ 高機能な画像編集・加工サービス

 ## orientation

• 以下の投稿では、Scrapboxに、追記のメモと、手書き（Mouse, Stylus Pen)で、簡単なHandwritingなメモを、ScrapboxのPageに追記した。

• 本投稿では、mermaidで生成した図に、手書きでメモを追加する手順を、考える。

  • mermaidは、Scrapbox内で"code:diagram.mmd"等で記述したコードブロック内で、mermaid記法で記述したコードにより、図形を描画できる。

  • mermaidは、シンプルに書いて、簡単な図を組み込むの利用できる。が、複雑な図をmarmaid記法でコード化するのは、手間がかかる。

    • 簡易さを求めているのに、表現に手間をかけては意味がない。

 ## Q

なせ、ニーサ、新ニーサは非課税？理由は？ - 老後は年金で暮らせると思ってる馬鹿が非常に多かったので、「一定レベルの投資に対す... - Yahoo!知恵袋

 ## mermaidの図に、手書きメモを追加

• https://scrapbox.io/jee54321/なぜ、NISA・新NISAは非課税

なぜ、NISA・新NISAは非課税 - jee54321

 ## discussion

• Scrapboxにて、mermaidで作成した図を、画面コピーでpngにして、そのイメージファイルに、手書きメモを書き込み、再度、Scrapboxに張り付けた。これで、充分と判断。

• 以下、手順。(note.comのmermaidで描画)

  • Online FlowChart & Diagrams Editor - Mermaid Live Editor

----------
```mermaid
graph LR
  procedure1[1.mermaidで描画]
  procedure2[2.mermaidで描画した図を\nGyazoでScreenshot]
  procedure3[3.GyazoでScreanshotを加工]
  procedure4[4.Gyazoで表現できない場合\nCanvaで加工]
  procedure5[5.表現できてない情報を\nScrapboxのDrawingで追記]
```

```mermaid
graph LR
  %% node definition
  procedure1[1.mermaidで描画]:::fixHeight
  procedure2[2.mermaidで描画した図を\nGyazoでScreenshot]:::fixHeight
  procedure3[3.GyazoでScreanshotを加工]:::fixHeight
  procedure4[4.Gyazoで表現できない場合\nCanvaで加工]:::fixHeight
  procedure5[5.表現できてない情報を\nScrapboxのDrawingで追記]:::fixHeight
```

 ### 1. mermaidで図解

• 図として強調したい部分を意識する。Mermaidでも色合いは、強調するように指定可能。

  • 強調指定の方法

    • 図形（node）内のtext文字で、markdown記法で、<strong>, <u>, <i>等を設定する

    • mermaid内で、nodeに、style指定する。以下、今回、記述したCode。

    • ※ note.comのmermaidでは、font-awesomeでのIcon表示はできないよう。(23/12/29現在)

graph LR
  classDef default fill:#fff, color:gray, stroke:gray, font-size:1.2em, font-family:monospace; 
  classDef white color:white; 
  classDef black color:black, fill:black; 
  classDef l color:gray, fill:white, font-size:x-large;  
  classDef xl color:gray, fill:white, font-size:xxx-large;  
  classDef xlinfo color:gray, fill:white, font-size:xx-large, width:50px, text-alian:center;
  classDef transp stroke:transparent, color: blue, font-weight:normal, font-size:xx-large;
  classDef transp2z stroke:transparent, color: gray, font-weight:normal, font-size:xx-large;
  classDef transp3z stroke:transparent, color: gray, font-weight:normal, font-size:large;
 %% ------------------------------------------------------
 %% syntax sample
 subgraph paragraph0[Why New NISA is Tax-free?]
 %% node definition
   %% Showa
   subgraph paragraph1[Showa Era]
     people[fa:fa-users]:::transp2z
     saving[fa:fa-database 財形貯蓄]:::transp2z
     people ---| | saving
     comment[fa:fa-quote-left 預金金利が高かった ]:::transp3z
   end
   %% Reiwa
   subgraph paragraph2[Reiwa Era]
     people2[fa:fa-users]:::transp2z
     saving2[fa:fa-database NISA/\n新NISA]:::transp2z
     people2 -.- saving2
     comment2[fa:fa-quote-left 預金金利が0.01% ]:::transp3z
   end
   paragraph1 ===> paragraph2
   %% 
 end

```mermaid
graph LR
  classDef default fill:#fff, color:gray, stroke:gray, font-size:1.2em, font-family:monospace; 
  classDef white color:white; 
  classDef black color:black, fill:black; 
  classDef l color:gray, fill:white, font-size:x-large;  
  classDef xl color:gray, fill:white, font-size:xxx-large;  
  classDef xlinfo color:gray, fill:white, font-size:xx-large, width:50px, text-alian:center;
  classDef transp stroke:transparent, color: blue, font-weight:normal, font-size:xx-large;
  classDef transp2z stroke:transparent, color: gray, font-weight:normal, font-size:xx-large;
  classDef transp3z stroke:transparent, color: gray, font-weight:normal, font-size:large;
 %% ------------------------------------------------------
 %% syntax sample
 subgraph paragraph0[Why New NISA is Tax-free?]
 %% node definition
   %% Showa
   subgraph paragraph1[Showa Era]
     people[fa:fa-users]:::transp2z
     saving[fa:fa-database 財形貯蓄]:::transp2z
     people ---| | saving
     comment[fa:fa-quote-left 預金金利が高かった ]:::transp3z
   end
   %% Reiwa
   subgraph paragraph2[Reiwa Era]
     people2[fa:fa-users]:::transp2z
     saving2[fa:fa-database NISA/\n新NISA]:::transp2z
     people2 -.- saving2
     comment2[fa:fa-quote-left 預金金利が0.01% ]:::transp3z
   end
   paragraph1 ===> paragraph2
   %% 
 end
```

 ### 2.GyazoでScreanshot

• Gyazoは、Scrapboxを提供しているhelpfeel社のサービス

  • https://gyazo.com/

    • 簡易な画像加工が可能

Gyazo · Screen Recorder: Share Screenshots and Videos Easily

 ### 3. GyazoでScreanshotを加工

 ### 4. Canvaで加工

• Gyazoで表現できない場合等で、機能は高機能で、様々、画像編集、画像加工に利用できる。

 ### 5. Scrapbox Drawing機能で追記

• Scrapbox内で、作業中にも使える。

  • が、メモリリークに注意。書いていた文字が全部、飛ぶ。

 ## appendix

• 以下、こちらが提示した回答文

資産形成を促進するため。
.
今までも、発生利子に非課税枠のある財形貯蓄なんかがありますよ。その考えを、証券投資に広げた感じ。
.
日本経済は、２５年以上、デフレ・ディスインフレ傾向で、普通預金金利は、0.01％とかです。そのため、昭和の頃のように、貯蓄では、国民が資産形成するのは、困難になっています。
.
より、国民の資産形成の補助制度として、導入された感じです。