コードを導く図を。

Skitze は、エンジニアとソフトウェアアーキテクトのための、軽快でシンプルな作図エディターです。フローチャートや UML 図を、ブラウザー上で数分で描けます。プラグインも、探し回るだけの膨大な図形ライブラリーも必要ありません。

無料で始める 使い方を見る
01 · UML コンポーネント図

部品のつながりを示す

コンポーネント、インターフェース、依存関係をひと目でわかる形でモデル化できます。コンポーネントをサブシステムにまとめれば、大きなシステムがどう分かれているのか、どの部分を個別に変更・スケール・置き換えできるのかを示せます。

Skitze で作成した UML コンポーネント図:Order Processing サブシステム(Order Processing と Order Validation のコンポーネントを含む)が、Shipping Scheduling を介して Shipping サブシステムに、Inventory Check を介して Inventory サブシステムに接続されています。クリックするとフル解像度で表示されます。
Skitze で作成した UML クラス図:Customer が Order を発注し、各 Order は OrderStatus 列挙型を持ち、関連クラス OrderItem を介して Item を集約します。Order は PaymentAuthorization インターフェースを実現する Payment で支払われ、CreditCard と Check が支払い方法のサブクラスです。クリックするとフル解像度で表示されます。
02 · UML クラス図

データモデルを形にする

ドメインの構造を描き出します。各クラスが何を持ち、何をし、ほかとどう関係するのか。コードを書く前に設計を合意するためにも、既存のコードを整理するためにも使えます。

03 · UML シーケンス図

ビジネスロジックを形にする

最初のリクエストから最後のレスポンスまで、ビジネスプロセスがサービス間をどう流れるかを追えます。ループ、分岐、オプションのステップによって、ルールがコードに埋もれず明確になります。

Skitze で作成した UML シーケンス図:Customer が Order Srvc に注文し、Order Srvc は品目ごとにループして Inventory Srvc で在庫を確認したうえで、Shipping Srvc と Messaging Srvc で配送を手配・確定するか、失敗を通知します。クリックするとフル解像度で表示されます。
Skitze で作成した注文処理のフローチャート:Start から Read Order Details、Validate Order へと進み、Valid? の判断で Yes なら Ship Order と Generate Confirmation を経て Complete に、No なら Reject に分岐します。クリックするとフル解像度で表示されます。
04 · フローチャート

ロジックを図にする

フローチャートでアルゴリズムや手続き的なロジックをモデル化し、プログラマー以外の人にも説明できます。業務手順や運用手順、決定木、シンプルな直線的プロセスにも同じように使えます。

05 · 今後の予定

さらに多くの図の種類を準備中

フローチャートと、UML のコンポーネント図・クラス図・シーケンス図は現在ご利用いただけます。今後追加予定の機能はこちらです。

近日公開

ER 図

スキーマのテーブル、キー、リレーションを、実際のクエリの使い方に沿って整理できます。

近日公開

図のリンク

図同士をつなげて、コンポーネントからそのシーケンス図へワンクリックで移動できます。

さっそく描いてみませんか?

無料で始められ、インストールも不要です。チームのフローチャートや UML 図を描いて、Skitze でどこまでできるか試してみてください。

無料で始める