フローチャート作成ソフト

• 情報系の学生などを対象としたフローチャートを作成するツール
  
• 画面に表示される図形をクリックするとその図形が出力される
  
• 図形をドラッグすることで大きさの変更と移動ができる
  
• 図形に文字の入力も可能に
  
• 作成したフローチャートを画像として保存できる

ものと操作の洗い出し

モジュール化

• プロトタイププログラムのGitLabのURL
  https://gitlab.cis.iwate-u.ac.jp/2021_g07/proj.git

• 青丸の出力に関する説明
  main.htmlからsvg_output.jsを呼び出す。svg_output.jsでは画像の出力を指定する。circleに円の画像であるcircleというidを取得してcircleがクリックされたら挙動を始める関数を記述する。svg_circleに円を覆うsvg_circleというidを取得してそのノードを小要素まで複製したものをcreate_output_cloneに格納する。document.body.appendChildで複製したノードをbodyタグの小要素としてくっつける。
  

• 作成画面から保存画面への遷移に関する説明
  main.htmlにある保存ボタンにonclick属性をつけてリンク先としてはSaveScreen.htmlにする。ボタンをクリックすることでSaveScreenへ遷移する。

• 保存画面から作成画面への遷移に関する説明
  上記した遷移方法と同様にして保存画面にaタグを使いリンクとしてはmain.htmlを設定することでクリック処理により作成画面へ遷移する。
  

スクリーンショット

• 制作画面
  
  
  
  
• 制作画面に画像を挿入
  
  
  
  
• 画面遷移
  
  
  

• 追加予定の図形の例(青い円はデモ用)