How to draw ER diagram with code using plantuml

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!