Hi again,
This time I would like to share how I code my ER Diagram using code only.
The tool I'm using is PlantUML. There is an online tool at planttext.com
Why I'm doing this?
I hate using mouse and I love being able to version control my ER Diagram as a code inside git.
Preparation
Online
If you don't want to setup anything, just go ahead and use planttext.com
Local / Atom
Install these packages
plantuml plantuml-viewer or plantuml plantuml-preview
Then create a file for your ER diagram.
touch ~/Desktop/example.pu
I usually go for *.pu for all PlantUML files.
The fun part
Put this in your file then toggle preview using cmd+shift+p then type plantuml.
@startuml
skinparam linetype ortho
skinparam packageStyle rectangle
skinparam shadowing false
skinparam class {
BackgroundColor White
BorderColor Black
ArrowColor Black
}
hide members
hide circle
User1 ||-up-|{ Role1
User2 ||-down-|{ Role2
User3 ||-left-|{ Role3
User4 ||-right-|{ Role4
@enduml
This is One and Only One to One or Many
If you don't specify direction, it will default to down.
More options
@startuml
skinparam linetype ortho
skinparam packageStyle rectangle
skinparam shadowing false
skinparam class {
BackgroundColor White
BorderColor Black
ArrowColor Black
}
hide members
hide circle
User1 --|{ Role1
User2 o--|{ Role2
User3 |o--|{ Role3
User4 --o{ Role4
User5 --{ Role5
@enduml
I can't get o--|{ to work properly.
It also work the other way around
@startuml
skinparam linetype ortho
skinparam packageStyle rectangle
skinparam shadowing false
skinparam class {
BackgroundColor White
BorderColor Black
ArrowColor Black
}
hide members
hide circle
User1 }|-- Role1
User2 }o-- Role2
User3 }--|| Role3
User4 }--o| Role4
User5 }--o Role5
@enduml
You can experiment changing it to the other way round.
Showing attributes
By removing hide members (line 10) you can add attributes to your classes. If you add it back, all attributes will be hidden.
@startuml
skinparam linetype ortho
skinparam packageStyle rectangle
skinparam shadowing false
skinparam class {
BackgroundColor White
BorderColor Black
ArrowColor Black
}
hide circle
class "User" as User1 {
- int id
- int age
- string name
+ ([role]) roles()
+ ([user_role]) user_roles()
}
class Role {
- int id
- string name
}
class "UserRole" as User1Role {
- int id
- int user_id
- int role_id
}
User1 ||-right-|{ User1Role
Role ||-left-|{ User1Role
@enduml
That's it, hope you liked the way I did it.
I also got a gem for rails apps https://github.com/sakKo/prailroady forked from https://github.com/preston/railroady
Let me know if I can improve my post. thankz!
Top comments (0)