class-diagram-maker

Class Diagram Maker

About the tool

Class diagrams are a great way to visualize the structure of your system and the relationships between the classes. They are widely used in software development to document the system architecture and design.

This tool allows you to create class diagrams based on the JSON input representing the classes and their attributes and associations. It uses the WASM port of the GraphViz library to render the diagrams synchronously on the client.

Demo

Classes (JSON)

[
  {
    "name": "Book",
    "attributes": [
      {
        "name": "title",
        "type": "string"
      },
      {
        "name": "summary",
        "type": "string"
      },
      {
        "name": "language",
        "type": "string"
      },
      {
        "name": "pages",
        "type": "number"
      }
    ],
    "associations": [
      {
        "name": "authors",
        "type": "Author",
        "cardinalitySource": "1..*",
        "cardinalityTarget": "1..*"
      },
      {
        "name": "publisher",
        "type": "Publisher",
        "cardinalitySource": "1..*",
        "cardinalityTarget": "1..1"
      },
      {
        "name": "characters",
        "type": "Character",
        "cardinalitySource": "1..*",
        "cardinalityTarget": "1..*"
      }
    ]
  },
  {
    "name": "Author",
    "attributes": [
      {
        "name": "name",
        "type": "string"
      },
      {
        "name": "biography",
        "type": "string"
      }
    ],
    "associations": []
  },
  {
    "name": "Publisher",
    "attributes": [
      {
        "name": "name",
        "type": "string"
      },
      {
        "name": "address",
        "type": "string"
      }
    ],
    "associations": []
  },
  {
    "name": "Character",
    "attributes": [
      {
        "name": "name",
        "type": "string"
      },
      {
        "name": "biography",
        "type": "string"
      }
    ],
    "associations": [
      {
        "name": "knows",
        "type": "Character",
        "cardinalitySource": "1..*",
        "cardinalityTarget": "1..*"
      }
    ]
  }
]1
[
2
  {
3
    "name": "Book",
4
    "attributes": [
5
      {
6
        "name": "title",
7
        "type": "string"
8
      },
9
      {
10
        "name": "summary",
11
        "type": "string"
12
      },
13
      {
14
        "name": "language",
15
        "type": "string"
16
      },
17
      {
18
        "name": "pages",
19
        "type": "number"
20
      }
21
    ],
22
    "associations": [
23
      {
24
        "name": "authors",
25
        "type": "Author",
26
        "cardinalitySource": "1..*",
27
        "cardinalityTarget": "1..*"
28
      },
29
      {
30
        "name": "publisher",
31
        "type": "Publisher",
32
        "cardinalitySource": "1..*",
33
        "cardinalityTarget": "1..1"
34
      },
35
      {
36
        "name": "characters",
37
        "type": "Character",
38
        "cardinalitySource": "1..*",
39
        "cardinalityTarget": "1..*"
40
      }
41
    ]
42
  },
43
  {
44
    "name": "Author",
45
    "attributes": [
46
      {
47
        "name": "name",
48
        "type": "string"
49
      },
50
      {
51
        "name": "biography",
52
        "type": "string"
53
      }
54
    ],
55
    "associations": []
56
  },
57
  {
58
    "name": "Publisher",
59
    "attributes": [
60
      {
61
        "name": "name",
62
        "type": "string"
63
      },
64
      {
65
        "name": "address",
66
        "type": "string"
67
      }
68
    ],
69
    "associations": []
70
  },
71
  {
72
    "name": "Character",
73
    "attributes": [
74
      {
75
        "name": "name",
76
        "type": "string"
77
      },
78
      {
79
        "name": "biography",
80
        "type": "string"
81
      }
82
    ],
83
    "associations": [
84
      {
85
        "name": "knows",
86
        "type": "Character",
87
        "cardinalitySource": "1..*",
88
        "cardinalityTarget": "1..*"
89
      }
90
    ]
91
  }
92
]

Output

Thanks for stopping by my digital playground! If you want to say hi, you can reach out to me on LinkedIn or via email. I'm always keen to chat and connect.

If you really-really like my work, you can support me by buying me a coffee.