はじめに
ZenUMLは、シーケンス図やフローチャートの作成に特化した、マルチプラットフォームのダイアグラム・アズ・コード・ソリューションです。ZenUMLのダイアグラムは単なる静的な画像ではなく、ユーザーはダイアグラムと対話することができます。たとえば、編集モードでダイアグラム上のメッセージをハイライトすると、対応するコードが自動的に選択されます。ZenUMLはプライバシーとセキュリティを重視しており、レンダリングのためにデータをサーバーに送信することはありません。レンダリングのためにデータがサーバーに送信されることはなく、ユーザー・データのセキュリティが確保されます。このツールはOMG UML 2.5.1に準拠しており、図をより読みやすくするためにクラウドアイコンなどの豊富な拡張機能を提供しています。ZenUMLはフィンテック、通信、小売など幅広い業界で使用されており、Confluence、Webアプリケーション、ブラウザ拡張機能、IDEプラグイン、デスクトップアプリケーションなど、さまざまなプラットフォームでサポートされています。
機能一覧
- リアルタイム・レンダリング:サーバーサイドのインタラクションなしに、ブラウザ上でリアルタイムにチャートをレンダリング。
- インタラクティブ・チャート: ユーザーはチャートと対話し、複雑なチャートを素早くナビゲートすることができます。
- プライバシーとセキュリティ: レンダリングのためにデータがサーバーに送信されることはなく、データの安全性が確保されています。
- 標準準拠: OMG UML 2.5.1に準拠し、豊富な拡張機能を提供します。
- マルチプラットフォーム対応: Confluence、ウェブアプリケーション、ブラウザ拡張機能、IDE プラグイン、デスクトップアプリケーションをサポート。
- よりシンプルなDSL:コード行数を減らし、可読性と保守性を向上させるために、よりシンプルなDSL言語を使用する。
- 専門家によるサポート:設置、トレーニング、故障時のサポートが提供され、ほとんどの問題は8時間以内に解決されます。
- 豊富な拡張機能:例えば、グラフをより見やすくするための雲のアイコン。
ヘルプの使用
設置プロセス
- ウェブアプリケーション::
- ZenUMLのウェブサイト(https://zenuml.com/)をご覧ください。
- アカウントに登録し、ログインしてください。
- ワークスペースに入り、チャートの作成を開始する。
- Confluence プラグインのインストール::
- Confluence 管理バックエンドで、適用を選択します。
- ZenUML」を検索し、「インストール」をクリックします。
- インストールが完了したら、ZenUMLマクロをページに追加して図の作成を開始します。
- ブラウザ拡張機能のインストール::
- ブラウザの拡張機能ショップで「ZenUML」を検索してください。
- ブラウザに追加」をクリックし、指示に従ってインストールを完了します。
- インストールが完了したら、ブラウザのツールバーにあるZenUMLのアイコンをクリックして図の作成を開始します。
- IDEプラグインのインストール::
- IDEのプラグインマーケットで「ZenUML」を検索してください。
- インストール」をクリックし、プロンプトに従ってインストールを完了する。
- インストールしたら、IDEでZenUMLプラグインを開き、ダイアグラムの作成を開始します。
使用プロセス
- シーケンス図の作成::
- ワークスペースの "New Chart "を選択する。
- シーケンス図のテンプレートを選択します。
- 例えばZenUMLのDSL言語を使ってコードを書く:
Alice --> Bob: こんにちは、ボブ。 Bob --> Alice: 元気です、ありがとう!
- リアルタイムでチャートをプレビューし、調整と最適化を行う。
- フローチャートの作成::
- ワークスペースの "New Chart "を選択する。
- フローチャートテンプレートを選択する。
- 例えばZenUMLのDSL言語を使ってコードを書く:
開始 ステップ1; :ステップ2; :ステップ3; :ステップ4; :ステップ5; :ステップ6; :ステップ7 ステップ2; :ステップ3; :ステップ4; :ステップ5; :ステップ6; :ステップ7 ステップ3 開始 :ステップ1; :ステップ2; :ステップ3; :ステップ4; :ステップ5
- リアルタイムでチャートをプレビューし、調整と最適化を行う。
- グラフのエクスポートと共有::
- ダイアグラムの作成が完了したら、「エクスポート」ボタンをクリックし、エクスポート形式(PNG、SVGなど)を選択します。
- リンクまたは埋め込みコードでチャートを共有する。
- 高度な機能::
- 雲アイコンやその他の拡張機能でチャートの見やすさを向上。
- 編集モードでチャート上のメッセージをハイライトし、コードを素早くナビゲートする。
- ZenUML ヘルプセンターで、より多くのヒントとサポートをご覧ください。
一般的な問題
- データ・セキュリティはどのように確保するのですか? ZenUMLはレンダリングのためにデータをサーバーに送信せず、データのセキュリティを確保するためにすべての操作はローカルで行われます。
- テクニカル・サポートはどうすれば受けられますか? ほとんどの問題は8時間以内に解決されます。
- チームワークをサポートしているか? ZenUMLはチームコラボレーションをサポートしており、ユーザーは図のリンクを共有し、一緒に図を編集・閲覧することができます。
回路図シャープナー D2
回路図を作るためのツールはたくさんある。
ワイヤーフレーム図には、Mermaid、Plantuml、Graphvizのようなテキストコードベースのダイアグラムツールを使うのが好きだ。
これらはすべて、コードに基づいて画像を生成し、バージョン管理のためにコード・リポジトリに置くのに最適だ。
最近、この種のツールでもっと使いやすいものを見つけた。 D2以下に紹介するのは、シンプルで直感的、かつ強力なツールである。
D2はコマンドラインでもブラウザでも使える。画像コードファイルexample.d2
画像を生成するコマンドは以下の通り。
$ d2 example.d2
ほとんどの場合、ブラウザーから使っている。オンライン・ジェネレーターがある play.d2lang.com(下)にコードを貼り付け、"コンパイル "ボタンを押すと、すぐに画像が生成される。
ノードA(ノード名はA)が欲しければ、Aをタイプすればいい。
A
ノードの内容をカスタマイズしたい場合は、以下のように記述する。
A: A
次にノードを追加する。
A: A
B: B
それらをつなぐ。
A: A
B: B
A -> B
接続は正の矢印(->
)、または逆矢印(<-
)、さらには双方向矢印().矢印が不要な場合は、線をつなぐだけでよい(
--
).
矢印にテキストを追加することもできる。
A: A
B: B
A -> B: コネクション
ノード間には複数の接続が存在しうる。
A: A
B: B
A -> B: リクエスト
A <- B: 応答
ノードの接続は1行で書くこともできる。
A -> C <- B: コネクション
ステージ1→ステージ2→ステージ3→ステージ4
ステージ4 → ステージ1:フィードバック
基本的なワイヤーフレーム図を描くには、この構文で十分だろう。
D2は非常に複雑なダイアグラムを描くことができます。(さんぷ.
最後に、ノードの形状を変更したい場合は、以下のようにボックスが円に変更される。
A: A
A.形状:円
クラウドサービスを示すために、形状を雲に変更することもできる。
A: A
A.形状:雲
線の色も変更できる。
A: A
A.style.stroke: red