3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Figmaでクラス図を手軽に描く

Last updated at Posted at 2024-01-14

概要

Figmaを使うとクラス図を手軽に描くことができます。操作は簡単なのでFigmaを使ったことがない人でも大丈夫です。

本文

クラス図の作成

Figmaのウィジェット「EntityModeler」のページに行きます。
スクリーンショット 2024-01-14 22.25.36.png
「場所を指定して開く」ボタンから「+新しいファイル」を押すとノードが一つだけ用意された新規ファイルが作成されます。(Figmaアカウントへのログインもしくはアカウント作成が必要になるかもしれません)
スクリーンショット 2024-01-14 22.27.09.png
ノードの右上の4つの点を押すと中身を編集するためのポップアップが開かれます。1行目にEntity名を入力したら後はプラスボタンを押すごとに項目を増やしていけます。後はスクショを参考にしてクラス図を作成してみてください!
スクリーンショット 2024-01-14 22.31.18.png
スクリーンショット 2024-01-14 22.51.48.png

エクスポート

クラス図の出力したい範囲をドラッグで囲んで選択したら右クリックのメニューから「選択内容をエクスポート」を選びます。(画面左上のメインメニューボタンから「ファイル > エクスポートオプション」でもOKです)
スクリーンショット 2024-01-14 23.01.10.png
「エクスポート」ポップアップが表示されます。ファイルの種類を選んだら背景の項目で透明にしたりもできます。
スクリーンショット 2024-01-14 23.01.33.png
完成したクラス図がダウンロードフォルダに出力されます。
Entity Modeler (コミュニティ) (2).png

補足

参考にさせていただいたサイト
Figmaで効率的にオブジェクトモデルを設計する方法

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?