Anton V.
Projects and blogs
Software dev
Diagrams
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

Class Diagram Maker

About the tool

Demo

See also