memorandums

日々の生活で問題解決したこと、知ってよかったことなどを自分が思い出すために記録しています。

VSCodeでフローチャートを作成するメモ

はじめに

昨日から1年生とのゼミ授業が始まりました。演習内容は各ゼミに任されているので、うちはみんなでコードリーディングをしてもらっています。Pythonを習い始めているのでProcessing & Pythonのコードを読んで、どの命令が、どのパラメタがそれぞれどういう意味なのかを自分等で探ってもらいます。

学生同士、狭い部屋にいてもグループが違うとなかなか会話できないのを長らく見てきました。気持ちはわからないではないけど、でも、何かの縁なので知り合いになってくれたらと思うものでした。チームでコーディングとかできたら面白いのにな、と思うものの、1年生では自由に作ることは無理です。

コードリーディングならググればできるはずだし、チームで協力して謎解きする感じがしたら面白いな。。。と想像して作りました。あと5回ありますので、授業評価アンケートで効果のほどを確認したいと思います。

私は何をしているのかというと、弱いファシリテートでしょうかね。。。聞かれればもちろん教えますし。難しそうだったらそっとコメントします。

そんな会話をしているときに、プログラミングの授業でフローチャートを書かされるんだけど、それメンドイんだよね。。。という生の声が聞こえてきました。はー、なるほど。こういうのメンドウって感じるのは優秀なITエンジニアとしての素質があると思います。メンドウだから何とかする。人力ではなく知識で。

「それなら、Markdownで書けるよ、今度教えてあげようか?」というと意外なほどにウケました。。。あ、そうなんだ。。。まぁ、どれくらい楽になるかはわからないけど、チマチマと絵を書くよりは僕は楽で好きなんですけどね。

ということで、すぐに忘れる僕としては、教えるときに要点だけメモしておきたいと思いました、これ書き始めました。

BYODなので各学生は自分PCを持ち込んで学校に来てくれます。時代も変わりましたね。。。🤔(感慨深げ)

VSCodeフローチャートを書くまでの手順

(1) ここからVSCodeをインストールしましょう。

(2) VSCodeを起動して、拡張機能として以下の2つをインストールしましょう。

(3) VSCodeでファイルメニューから新しいテキストファイルを選択し、そこに以下をコピペします。

```mermaid

flowchart TD;

A[履修登録する] --> B[出席する];

B --> C[課題を出す];

C --> D[試験を受ける];

D -- 60点以上 --> E[おめでとう];

D -- 60点未満 --> F[また来年];

F --> A

```

(4) ファイルメニューから保存を選択し、適当な名前(a.md)をつけて保存します。で、以下の赤矢印のところをクリックすると

以下のようなプレビューが見れます。

(5) 最後にフローチャート図の上で右クリックしてEXPORT - PNGとか選択すると画像が出力できて、課題提出が楽になりますね?

以上です。

ちなみに、上記の記法はMermaid記法といいます。ググれば説明サイトがありますので参照しましょう。自分で発見していってください。