RailsのER図をFigjamでガチャガチャできるようにして設計議論をしやすくしたい

funwarioisii 4ヶ月前に更新

やりたいこと

Figjamで設計について議論したりしやすくしたい

ピンクの部分が自動で生成されると、青の部分でこんなモデル追加すると良いんじゃない？とか話しやすい
モデルの数が増えるほど、手で書き起こすのは大変なので。

知ってたこと

rails-erd でER図のpdf を吐いたり、 dot形式で出力できる
Figma の plugin はTypeScript で開発できる

最初に思ってた進め方

多分 rails-erd-mermaid みたいな gem で ER図を mermaid で吐けよう
多分 mermaid のライブラリで mermaid.parse(text) とかしたらいい感じの中間表現が得られよう
そしたら後は表示だけ頑張ればよかろう

funwarioisii 4ヶ月前に更新

Rails で ER図を mermaid として出力

というブログを発見
いい感じだなーと思って、 gem を読むと

モデルの関係を読む
モデルとその関係をハッシュオブジェクトとしてフロントエンドに渡す
フロントエンドで mermaid として組み立てる

というのをやっていた。
mermaid にした結果を私は CLI 上で知りたかったのでちょっとユースケースが異なる

ので、一旦プロトタイプを作ってみた

以下のように使える

lib/tasks/erd.thor に↓

# frozen_string_literal: true

class Erd < Thor
  default_command :export

  desc "export_mermaid", "Generate a mermaid file from your database"
  option :filetype, default: "mermaid", desc: "Filetype to export. It is used for file extension."
  option :dir_name, default: "mermaid_erd", desc: "Directory name to export"
  option :file_name, default: "erd", desc: "File name to export"
  def export_mermaid
    config = RailsErdMermaid::Config.new(**options)
    app = RailsErdMermaid::App.new(config)
    app.export
  end
end

schema.rbを抜粋

  create_table "comments", force: :cascade do |t|
    t.string "body"
    t.integer "user_id", null: false
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.index ["user_id"], name: "index_comments_on_user_id"
  end

  create_table "users", force: :cascade do |t|
    t.string "name"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
  end

これで bundle exec thor erd:export_mermaid を実行すると erd_mermaid/erd.mermaid に

erDiagram
  Comment {
    id integer PK
    body string 
    user_id integer FK
    created_at datetime 
    updated_at datetime 
  }
  User {
    id integer PK
    name string 
    created_at datetime 
    updated_at datetime 
  }
  User o{--|| Comment : user

と出力される

funwarioisii 4ヶ月前に更新