Uploaded February 2025 | Updated September 2026, 3 weeks ago
After we finished our first pass at the NerdDice.com entity diagram, we still had an open issue on our project about adding it to the Wiki.
The first thing we do is remedy an issue from the previous two videos. The table backgrounds and the diagram backgrounds were both transparent, which provided no contrast and made the diagram difficult to see.
We are able to quickly give our tables a background color with CTRL+A and then applying the style. Before the color change, we had different background colors for our virtual attributes for ActiveStorage and ActionText. We need to reinstate those by doing a find for the applicable data types and changing the background colors.
We also have a very large canvas for our working entity diagram. We don't want that for our SVG export, so we select all and drag it to the top left and then re-size the canvas to match the size occupied by the content. Then we're able to export our diagram as an SVG and commit both the SVG and the changes we wanted from the original diagram to the profile repo.
Then we go in and add a page to our NerdDice.com Wiki for the data model, add a little content, and embed the SVG onto the data model page. After we add a reference to the data model page from the home page, we are good to go and can close the GitHub issue.
This video covers:
00:00:00 Introduction
00:03:37 Change the backgrounds on all the tables
00:04:17 Change the backgrounds for the virtual attributes back to light gray
00:06:27 Adjust the heights of the tables to match bottom row.
00:07:09 Save the entity diagram and do a temporary commit
00:08:36 Move diagram, and add a title
00:12:23 Resize the canvas to fit the size of the diagram
00:14:27 Export the SVG
00:15:48 Copy the SVG to the repo directory
00:16:52 Add the title back to the main entity diagram, and amend the commit with the current state of both the entity diagram and the SVG, push to the profile repo
00:20:02 Add a new page to the NerdDice.com Wiki
00:21:23 Add the SVG link to the Wiki
00:23:08 Add a reference to the data model page to the Wiki Home page, and close the GitHub issue
#ruby #rails7 #rails #rubyonrails #rubygems #codecast #screencast #github #opensource #minitest #TDD #agile #NerdDice #DnD #roleplaying #softwaredevelopment #learntocode #tailwind #postgresql #rubocop #devise #turbo #controllers #views #selenium #capybara #systemtest #entitydiagram #datamodeling #orm #drawio
See other related StatelessCode videos:
- Use an Entity Diagram to Draft a Data Model for a Rails App, Part 1: Overview and Users Table youtu.be/ZL-dvU0N3f8
- Use an Entity Diagram to Draft a Data Model for a Rails App, Part 2: Application Objects for D&D youtu.be/8ulrlwXxDrc
- Create a GitHub Wiki For User Experience Interviews youtu.be/UzPHcckRYd0
- Adapt a Usability Interview Script for the Project and Fix Broken Wiki Links youtu.be/rXcAFj7C0TI
Resources that we relied upon for this solution:
- Embed a diagram in GitHub markdown drawio.com/blog/embed-diagrams-github-markdown
- How to integrate diagrams.net (draw.io) with your GitHub repo gist.github.com/philip-gai/9c801bdff0ec4c1954f18217dc808476
Commit with updated entity diagram and SVG:
- github.com/statelesscode/statelesscode/commit/ce2810ad
NerdDice.com wiki
github.com/statelesscode/nerd_dice_dot_com/wiki
This video is CC0 - No rights reserved. (YouTube doesn't allow this option when publishing.) All code is released under the UNLICENSE. Stateless Code denies the concept of "intellectual property". Copying is not stealing.
After we finished our first pass at the NerdDice.com entity diagram, we still had an open issue on our project about adding it to the Wiki.
The first thing we do is remedy an issue from the previous two videos. The table backgrounds and the diagram backgrounds were both transparent, which provided no contrast and made the diagram difficult to see.
We are able to quickly give our tables a background color with CTRL+A and then applying the style. Before the color change, we had different background colors for our virtual attributes for ActiveStorage and ActionText. We need to reinstate those by doing a find for the applicable data types and changing the background colors.
We also have a very large canvas for our working entity diagram. We don't want that for our SVG export, so we select all and drag it to the top left and then re-size the canvas to match the size occupied by the content. Then we're able to export our diagram as an SVG and commit both the SVG and the changes we wanted from the original diagram to the profile repo.
Then we go in and add a page to our NerdDice.com Wiki for the data model, add a little content, and embed the SVG onto the data model page. After we add a reference to the data model page from the home page, we are good to go and can close the GitHub issue.
This video covers:
00:00:00 Introduction
00:03:37 Change the backgrounds on all the tables
00:04:17 Change the backgrounds for the virtual attributes back to light gray
00:06:27 Adjust the heights of the tables to match bottom row.
00:07:09 Save the entity diagram and do a temporary commit
00:08:36 Move diagram, and add a title
00:12:23 Resize the canvas to fit the size of the diagram
00:14:27 Export the SVG
00:15:48 Copy the SVG to the repo directory
00:16:52 Add the title back to the main entity diagram, and amend the commit with the current state of both the entity diagram and the SVG, push to the profile repo
00:20:02 Add a new page to the NerdDice.com Wiki
00:21:23 Add the SVG link to the Wiki
00:23:08 Add a reference to the data model page to the Wiki Home page, and close the GitHub issue
#ruby #rails7 #rails #rubyonrails #rubygems #codecast #screencast #github #opensource #minitest #TDD #agile #NerdDice #DnD #roleplaying #softwaredevelopment #learntocode #tailwind #postgresql #rubocop #devise #turbo #controllers #views #selenium #capybara #systemtest #entitydiagram #datamodeling #orm #drawio
See other related StatelessCode videos:
- Use an Entity Diagram to Draft a Data Model for a Rails App, Part 1: Overview and Users Table youtu.be/ZL-dvU0N3f8
- Use an Entity Diagram to Draft a Data Model for a Rails App, Part 2: Application Objects for D&D youtu.be/8ulrlwXxDrc
- Create a GitHub Wiki For User Experience Interviews youtu.be/UzPHcckRYd0
- Adapt a Usability Interview Script for the Project and Fix Broken Wiki Links youtu.be/rXcAFj7C0TI
Resources that we relied upon for this solution:
- Embed a diagram in GitHub markdown drawio.com/blog/embed-diagrams-github-markdown
- How to integrate diagrams.net (draw.io) with your GitHub repo gist.github.com/philip-gai/9c801bdff0ec4c1954f18217dc808476
Commit with updated entity diagram and SVG:
- github.com/statelesscode/statelesscode/commit/ce2810ad
NerdDice.com wiki
github.com/statelesscode/nerd_dice_dot_com/wiki
This video is CC0 - No rights reserved. (YouTube doesn't allow this option when publishing.) All code is released under the UNLICENSE. Stateless Code denies the concept of "intellectual property". Copying is not stealing.
