みなさん「draw.io」というものをご存知でしょうか？
「draw.io」は、フローチャートや構成図を作成することができるツールです。
簡単に作成でき、作成するのがなかなか楽しいのできっと好きになってくれると思います。
そして、この「draw.io」を「Pycharm」や「VSCode」などのエディタでも使用することができます。
今回の記事では「Pycharm」というエディタで「draw.io」を使用して、それをGitHubで公開していきたいと思います。
それでは初めていきましょう。
Pycharmのインストール
まずは「Pycharm」をインストールしていきましょう。
https://www.jetbrains.com/ja-jp/pycharm/download/#section=mac
「Community」からダウンロードしてください。
「Professional」は有料のものなので注意してください。
ダウンロードができたらインストールして「Pycharm」を起動してください。
左上にカーソルを合わして、出てきたメニューバーの「Pycharm」から「Preferences...」をクリックしてください。
サイドバーの「プラグイン」をクリックしてください。
ここから拡張機能をインストール、アンインストールすることができます。
「Japanese Language Pack」と「Diagrams.net Integration」、「Material Theme UI」、「Code With Me」を検索欄で検索してインストールしてください。
検索しても出てこないときは、「Marketplace」をクリックしてください。
おそらく出てきます。
インストールできたら、「Pycharm」を再起動してください。
draw.ioファイルの作成
では「draw.io」ファイルを作成しましょう。
デスクトップに「draw」ディレクトリを作成してください。
左上にカーソルを合わして、出てきたメニューバーの「ファイル」から「開く(O)...」をクリックしてください。
先ほど作成したディレクトリを選択して、「開く」を押してください。
そうすると上記のような画面が出てきます。（色味は変えてあるので気にしないでください）
「プロジェクト」のしたの「draw」ディレクトリを右クリックして、「新規」から「figure」をクリックしてください。
上記のような画面になるので、「ファイル名」のところに「figure」と入れて、「OK」を押してください。
ファイルが作成され、「draw.io」の画面が出ているのを確認できますね。
では好きなようにいじって、なんでもいいので作成してください。
GitHubに表示
作成できたらgitにプッシュしましょう。
プッシュができたら、「figure.drawio.svg」を開いてURLをコピーしておきましょう。
https://github.com/cardene777/question/blob/main/diagram.drawio.svg
こんな感じのものをコピーしてください。
プッシュできたら、「README.md」をクリックして、上の画像の赤枠の部分のペンマークをクリックしてください。
ここに色々書き込むことができますが、今回は先ほど作成したものを表示することだけしましょう。
<img src="先ほどコピーしたURL" alt="draw.io" title="構成図">
このようなものを書き込んで、下の方にある「Commit changes」をクリックしてください。
どうでしょう？
作成した「draw.io」が表示されていませんか？
表示されていれば完了です！
お疲れ様でした！
最後に
今回は『「Pycharm」というエディタで「draw.io」を使用して、それをGitHubで公開する』ということをしてきました。
「GitHub」の使い方がわからない人にとっては後半は意味がわからなかったと思いますが、今後「GitHub」の記事も書いていくのでしばしお待ちください。
もし詰まったりわからないことがあれば下のTwitterのDMやここのコメントで聞いてください！
それでは！
