PlantUML Problems

例題を通してUML図のコーディングを練習できるウェブサイトです。

💻サイトURL: https://plantuml-problems.kano.wiki/

✨Features

トップページ（Playground ページ）

機能	内容
UMLエディタ	エディタを通じて、UML図コーディングの練習ができます。正しいUML構文で入力すると、プレビューに図が表示されます。
画像ダウンロード	表示したプレビュー画像を様々な形式で保存できます。(PNG, SVG, ASCII)

問題ページ

問題一覧ページよりアクセスできます

機能	内容
UMLエディタ	見本の図を参考にUMLを書き、問題に挑戦します。
画像ダウンロード	表示したプレビュー画像を様々な形式で保存できます。(PNG, SVG, ASCII)
答えコード確認	ボタンより、見本図のコードを確認することができます。

チートシートページ

UMLの基本構文を確認できるチートシートを掲載しています（現在はクラス図、シーケンス図、アクティビティ図、状態図、マインドマップ、ガントチャート、デプロイメント図のチートシート）

⚒️Skills

カテゴリ	技術
フロントエンド	HTML / CSS / Javascript / Monaco Editor ライブラリ
バックエンド	PHP
本番環境	AWS EC2
デプロイ	Nginx
暗号化	Certbot

🔥Motivations

開発のモチベーション

• NGINXをリバースプロキシとして扱い、PHP-FPMにリクエストを転送してのデプロイを実際に試したい。
• チーム開発などでクラス図やシーケンス図は必ずと言っていいほどよく作るので、自分用としても構文の確認・練習できるサイトが欲しい
• 実際に作られそうなケースの問題も用意して、開発者が自分の設計・開発に役立てるものを作りたい。

👀Emphasis

こだわった点

• 情報過多にならない程度に、重要で基礎的な構文とプレビューのみをチートシートとして記載しました。
• ガントチャートやマインドマップなど、一般的なUML図以外にも実際の設計などで使われやすい図の問題も掲載しました。
• Vercel等にデプロイを一任するのではなく、EC2インスタンスを本番環境としてNGINXとPHP-FPMを介してデプロイ設定を行いました。

📜Log

作業ログ

➡️TBA

• レイアウトの改善
• 他の図の問題も追加