Diagrams.net
From Prog0
Contents |
Diagrams.net を使ったフローチャートの作成方法
使用開始
- https://www.diagrams.net/ にアクセスする
- Start をクリック
- Save diagrams to: では Device を選択
- DropBoxなど他の保存先を利用したい場合はそれを選んでもよい
- Create New Diagram を選択
- 途中まで作って保存してあった図を再編集したい場合は Open Existing Diagram を選択すると、ファイル選択のダイアログが開く
- Filenameは任意につけてよい（課題提出ファイルは後で名前を変更できる）
- ファイル形式もデフォルトの XML File (.drawio) でよい
- 図の種類はデフォルトの Blank Diagram を選択したままにする
- Flowchartは選ばない
- 最後に Create をクリック
新規ファイルの内容確認
- 画面右側の Paper Size を確認
- A4になっていない場合は変更しておく（特に図を印刷しておきたい場合は重要）
- 用紙の向き（Portrait（縦長）か Landscape（横長））は好みで変えてよい
- 画面左上のファイル名が表示されている部分をクリックすると、保存ファイル名を変更できる
描画
- 画面左側に図形のパーツがある
- 一般図形は General のカテゴリ
- フローチャートに使う図形（ループの図形、はじめ・終わりの図形など）は Flowchart のカテゴリ
- 図形を選んで描画エリアにDrag&Dropすると配置される
- 図形の位置やサイズ，向きは配置後に変更できる
- 図形を選択すると隅に表示される、水色の回転マークをクリックすると90度ずつ回転する。回転マークを掴んで任意の角度回転させることもできる
- ループを示す台形（角の欠けた長方形）は上側のパーツしかないので下側のパーツは回転させて作ること
- 配置済みの図形を選択すると、画面右側に表示される Style で図形の色、塗りつぶしの有無などを変更可能
- Styleの隣のタブの Text では図形中のテキスト（次項で説明）の体裁を変更可能
- 同じく Arrange では図形の配置やサイズ、他の図形との重なりを変更可能
テキストの追加
- 図形をダブルクリックするとテキストを追加できる。（線に対しても追加可能）
- 何もないところにテキストを配置したい場合は General の Text を選んで配置し、内容を編集する
- 図形を任意角度回転させると文字も回転するが、回転マークのクリックで90度ずつ回転させると文字の向きは変わらない
線による図形の接続
フローチャートの図形の接続はいくつかの方法で行える
線パーツの配置
- General カテゴリの図形パーツから矢印付きの線を選んで配置する
図形からの線の引き出し
- 配置済みの図形の上にマウスカーソルを当てる
- 図形の枠線上に水色の小さな × 印マーカが表示されるので、ドラッグするとその方向にマーカから矢印付きの線が引き出される
線の編集
- 線や矢印を選択して、端点の水色のマーカをドラッグすれば線を伸ばすことができる
- 配置済みの図形まで線を伸ばすと、その図形の枠線上に表示される水色の小さな × 印マーカに線の端点が接続する
- 一旦接続されれば、図形を移動させても線の接続は維持される
- 線も図形と同様に右側の Style、Text、Arrange で体裁などを変更可能
- Style で矢印の向きを変えることも可能
図形の追加
以下の操作で次々に矢印付きの線で接続された図形を追加していくこともできる
- 配置済みの図形の上にマウスカーソルを当てる
- 図形の四方に表示される水色の矢印をクリック
- 表示されるメニューから追加したい図形を選択
以下のようになる．
PDF形式での書き出し
以下の手順でPDF形式の図を書き出すことができる
- メニューバーの File -> Export as -> PDF を選択
- PDFの設定を尋ねるダイアログは、デフォルトのまま（Include a copy of my diagramのみ選択状態）で Export をクリック
- Filename に保存したいファイル名（たとえば ex08a2.pdf ）を記入
- Download をクリック
- ファイルを開くダイアログが出てきてしまう場合は、Save File -> OK
PDFファイルがダウンロードされるので，ブラウザのダウンロードファイル保存先のディレクトリを確認すること （大学のシステムだと ~/Downloads ディレクトリに保存されることが多い）
作業内容の保存
作業途中でいったんログアウトして、後でフローチャート作成を再開したい場合などは、 XML形式のファイル（拡張子 .drawio）を保存しておくとよい
- メニューバーの File -> Save as を選択
- Save as ダイアログで、Filename に保存する適当なファイル名を記入（ファイル名にスペースは入れない方が良い）
- Download をクリック
- ファイルを開くダイアログが出てきてしまう場合は、Save File -> OK
拡張子 .drawio のファイルがダウンロードされるので，ブラウザのダウンロードファイル保存先のディレクトリ（大学のシステムだと ~/Downloads 等）を確認
作業再開時は、
- diagrams.net 開始時に Create New Diagram の代わりに Open Existing Diagram を選択すると、ファイル選択のダイアログが開く
- あるいは、開始後白紙のフローチャート画面の状態で、メニューバーの File -> Open from -> Device... を選択するのでもよい
- ファイル選択のダイアログが開くので、保存しておいた拡張子 .drawio のファイルを探して選択し Open
保存しておいたフローチャートの編集を再開することができる
