PlantUMLの入力、プレビュー、および図のダウンロードを提供するWEBアプリケーションです。

https://texttouml.yuki-gakiya.com/

トップページではPlantUMLを入力するエディターとプレビューを提供しています。PlantUMLの構文に沿ったテキストをエディターに入力すると、プレビュー画面にリアルタイムで図が表示されます。画面上部にあるPNG、SVG、ASCIIのボタンをクリックすると、プレビューの拡張子を変更できます。また、Downloadボタンを押すと現在のプレビュー図をダウンロードできます。

トップページの下部にはPlantUMLの構文を確認できるチートシートも提供されています。

PlantUMLの練習ができる別のページもあります。練習ページでは左側からエディター、プレビュー、および既に用意された図が表示されます。ユーザーは右側の図と同じようになるように、エディターにテキストを入力します。これにより、PlantUMLの入力を練習できます。Show Answerボタンを押すと、答えの図のテキストを表示できます。
練習問題の一覧はトップページ右側のExercisesからアクセスできます。

ソフトウェアエンジニアはユースケース図、クラス図、アクティビティ図など、ソフトウェア設計の際にさまざまな図を使用します。そのため、オンラインで手軽に図を作成およびダウンロードできるアプリケーションの提供が便利だと考え、PlantUML Editorを開発しました。

• フロントエンド

  • 使用言語： HTML, CSS, Javascript
  • HTTPリクエスト: Fetch API
  • コードエディタ: Monaco Editor
  • CSSフレームワーク： chota

• バックエンド

  • 使用言語： PHP
  • PlantUML変換: PlantUML Server
  • パッケージ管理: Composer
  • Webサーバー: NGINX
  • サーバー: Amazon EC2
  • SSL/TLS証明書更新: Certbot

2023年9月11日から9日間かけて開発しました。

入力されたテキストはFetch APIを使用して非同期にサーバーに送信され、他の操作をブロックせずにリアルタイムでプレビューを表示できるようにしました。また、チートシートの部分も選択されたタブをページを再読み込みせずに表示するために、非同期でデータを取得してレンダリングしています。

各問題のページとテーブルは簡単に追加できるように、JSONファイルにID、タイトル、テーマ、UMLを入力するだけで動的に作成できるように設計しました。

プレビューやチートシート、問題などに表示される画像はすべてオンラインのPlantUML Serverを経由して表示し、サーバーのストレージを効率的に利用しています。

問題数が増加する場合を考慮し、練習問題の一覧ページが見やすいようにページネーションの実装を検討中です。

ユーザーが楽しみながら練習問題に取り組めるように、問題に正解した際に達成感や喜びを感じられるようなアクションを実装したいです。