Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Rails と人魚の話/rails-and-mermaid
Search
Masatoshi Moritsuka
April 04, 2024
Programming
0
380
Rails と人魚の話/rails-and-mermaid
Masatoshi Moritsuka
April 04, 2024
Tweet
Share
More Decks by Masatoshi Moritsuka
See All by Masatoshi Moritsuka
Time.zone.parse('dark')/time-zone-parse-dark
sanfrecce_osaka
0
73
外部APIが絡むテストをちょっといい感じに書く/a-little-nice-writing-external-api-testing
sanfrecce_osaka
0
10
gem_rbs_collection へのコントリビュートから始める Ruby の型の世界/contributing-gem-rbs-collection
sanfrecce_osaka
0
400
パターンマッチ使ってるかい?(kyobashi.rb)/use-ruby-s-pattern-matching-on-kyobashi-rb
sanfrecce_osaka
0
190
ApplicationController の継承を分割してエラーを減らした話/dividing-application-controller
sanfrecce_osaka
1
310
Input object ではじめる入力値検証/input-value-validation-using-input-object
sanfrecce_osaka
0
530
実例で学ぶRailsアプリケーションデバッグ入門 〜ログインできちゃってました編〜/rails-application-debug-introduction
sanfrecce_osaka
2
800
String#split何もわかっていなかった/didn_t_know_anything_about_string_split
sanfrecce_osaka
0
170
String#split何もわかっていなかった/didn-t-know-anything-about-string-split
sanfrecce_osaka
0
78
Other Decks in Programming
See All in Programming
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
310
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
240
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
180
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
20k
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
1
350
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1.1k
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
250
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
PipeCDのプラグイン化で目指すところ
warashi
1
290
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
870
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
15
5.3k
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
570
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
3.9k
KATA
mclloyd
30
14k
Building Applications with DynamoDB
mza
95
6.5k
Balancing Empowerment & Direction
lara
1
440
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Designing for humans not robots
tammielis
253
25k
How STYLIGHT went responsive
nonsquared
100
5.6k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Into the Great Unknown - MozCon
thekraken
40
1.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Scaling GitHub
holman
460
140k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Transcript
Rails と人魚の話 森塚 真年(@sanfrecce_osaka) 2024/04/04 Omotesando.rb#96 #omotesandorb
自己紹介 森塚 真年 @sanfrecce-osaka or @sanfrecce_osaka from: 大阪府枚方市 趣味: コミュニティ・勉強会
Machida.rb ・Hirakata.rb 株式会社エンペイ Ruby3.2/Rails7.0 Node.js v18/Vue.js 3.3/Vuetify 3.4 最近 Layout Cop を全部ドキュメント読んで設 定した
本編
ER 図
何使ってますか?
選択肢 gem gem 以外 DB クライアント(e.g. table plus) rails-erd erd
rails_erd_mermaid rails-mermaid_erd plant_erd
そもそもの要件 graphviz への依存がない エンジニア以外も触れるようにしたい エンペイではエンジニア以外も SQL を書いて いる
選ばれたのは
rails-mermaid_erd でした
rails-mermaid_erd 導入の手順 Gemfile に gem "rails-mermaid_erd", group: :development を追加 bin/rails
mermaid_erd Rails のER 図をMermaid で柔軟に生成できるGem を 作りました Repository Demo Page
できること ER 図の各種エクスポート・コピー Mermaid ・Markdown ・SVG ・PNG リレーションのプレビュー リレーションのコメントの表示 カラムの非表示
キーの表示 カラムコメントの表示 表示対象の絞り込み
できないこと テーブルのコメントの表示 mermaid のコメントとしてなら吐けるので PR 出す予定
裏側の仕組み 1. で model の 定義から Hash を組み立て 2. の
window.SCHEMA_DATA に 1 で組み立てた Hash を json に変換して bind 3. ファイルとして出力(JS 部分は cdn の Vue を使っ ているので html ファイル単体で動く) RailsMermaidErd::Builder.model_data templates/index.html.erb
ところで
そもそもの要件 graphviz への依存がない エンジニア以外も触れるようにしたい エンペイではエンジニア以外も SQL を書いて いる
🤔
そうだ!
migration に hook させて git で 管理しよう! %w(db:migrate db:schema:load).each do
|task| Rake::Task[task].enhance do Rake::Task['mermaid_erd'].invoke if Rails.env.development? end end
あとはこうして models/documentation.rb module Documentation; end
こうして ActiveAdmin.register Documentation do actions :index controller do def index
redirect_to admin_documentations_erd_path end end end
こうして config/routes.rb namespace :admin do namespace :documentations do resource :erd,
only: :show, format: 'html' end end
こうじゃ! config/mermaid_erd.yml result_path: app/views/admin/documentations/erds/show.html.erb
最後に rails-mermaid_erd べんり migration に hook させて更新して git 管理すれば view
として扱える activeadmin 等の管理画面の view ファイルとして 扱えば認証も解決 ( 今後は) 社内で ER 図 の勉強会 をやっていき!
ご清聴 ありがとうございました
None