Display JSON Data

JSON format is widely used in software.

You can use PlantUML to visualize your data.

To activate this feature, the diagram must:

begin with @startjson keyword
end with @endjson keyword.

Complex example

You can use complex JSON structure.

|---|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| | @startjson { "firstName": "John", "lastName": "Smith", "isAlive": true, "age": 27, "address": { "streetAddress": "21 2nd Street", "city": "New York", "state": "NY", "postalCode": "10021-3100" }, "phoneNumbers": [ { "type": "home", "number": "212 555-1234" }, { "type": "office", "number": "646 555-4567" } ], "children": [], "spouse": null } @endjson |

Highlight

|---|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| | @startjson #highlight "lastName" #highlight "address" / "city" #highlight "phoneNumbers" / "0" / "number" { "firstName": "John", "lastName": "Smith", "isAlive": true, "age": 28, "address": { "streetAddress": "21 2nd Street", "city": "New York", "state": "NY", "postalCode": "10021-3100" }, "phoneNumbers": [ { "type": "home", "number": "212 555-1234" }, { "type": "office", "number": "646 555-4567" } ], "children": [], "spouse": null } @endjson |

Using different styles for highlight

It is possible to have different styles for different highlights.

|---|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| | @startjson <style> .h1 { BackGroundColor green FontColor white FontStyle italic } .h2 { BackGroundColor red FontColor white FontStyle bold } </style> #highlight "lastName" #highlight "address" / "city" <

> #highlight "phoneNumbers" / "0" / "number" <

> { "firstName": "John", "lastName": "Smith", "isAlive": true, "age": 28, "address": { "streetAddress": "21 2nd Street", "city": "New York", "state": "NY", "postalCode": "10021-3100" }, "phoneNumbers": [ { "type": "home", "number": "212 555-1234" }, { "type": "office", "number": "646 555-4567" } ], "children": [], "spouse": null } @endjson |

JSON basic element

Synthesis of all JSON basic element

|---|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| | @startjson { "null": null, "true": true, "false": false, "JSON_Number": [-1, -1.1, "color:greenTBC"], "JSON_String": "a\nb\rc\td color:greenTBC...", "JSON_Object": { "{}": {}, "k_int": 123, "k_str": "abc", "k_obj": {"k": "v"} }, "JSON_Array" : [ [], [true, false], [-1, 1], ["a", "b", "c"], ["mix", null, true, 1, {"k": "v"}] ] } @endjson |

JSON array or table

Array type

|---|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| | @startjson { "Numeric": [1, 2, 3], "String ": ["v1a", "v2b", "v3c"], "Boolean": [true, false, true] } @endjson |

Minimal array or table

Number array

|---|--------------------------------------------------------------------------------------------------------------------------------|
| | @startjson [1, 2, 3] @endjson |

String array

|---|-----------------------------------------------------------------------------------------------------------------------------------------|
| | @startjson ["1a", "2b", "3c"] @endjson |

Boolean array

|---|------------------------------------------------------------------------------------------------------------------------------------------|
| | @startjson [true, false, true] @endjson |

JSON numbers

JSON strings

JSON Unicode

On JSON you can use Unicode directly or by using escaped form like \uXXXX.

JSON two-character escape sequence

|---|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| | @startjson { "legend: character name": ["two-character escape sequence", "example (between 'a' and 'b')"], "quotation mark character (U+0022)": ["\"", "a"b"], "reverse solidus character (U+005C)": ["\\", "a\b"], "solidus character (U+002F)": ["\/", "a/b"], "backspace character (U+0008)": ["\b", "a\bb"], "form feed character (U+000C)": ["\f", "a\fb"], "line feed character (U+000A)": ["\n", "a\nb"], "carriage return character (U+000D)": ["\r", "a\rb"], "character tabulation character (U+0009)": ["\t", "a\tb"] } @endjson |

FIXME

FIXME or not 😉, on the same item as \n management in PlantUML 😉 See Report Bug on QA-13066

FIXME

|---|------------------------------------------------------------------------------------------------------------------------------------------------------|
| | @startjson [ "\\", "\n", "\r", "\t" ] @endjson |

Minimal JSON examples

|---|-------------------------------------------------------------------------------------------------------------------------------------|
| | @startjson "Hello world!" @endjson |

|---|-------------------------------------------------------------------------------------------------------------------------|
| | @startjson 42 @endjson |

|---|---------------------------------------------------------------------------------------------------------------------------|
| | @startjson true @endjson |

(Examples come from STD 90 - Examples)

Empty table or list

|---|------------------------------------------------------------------------------------------------------------------------------------------------------------|
| | @startjson { "empty_tab": [], "empty_list": {} } @endjson |

[Ref. QA-14397]

Using (global) style

Without style (by default)

|---|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| | @startjson #highlight "1" / "hr" [ { "name": "Mark McGwire", "hr": 65, "avg": 0.278 }, { "name": "Sammy Sosa", "hr": 63, "avg": 0.288 } ] @endjson |

With style

You can use style to change rendering of elements.

|---|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| | @startjson <style> jsonDiagram { node { BackGroundColor Khaki LineColor lightblue FontName Helvetica FontColor red FontSize 18 FontStyle bold RoundCorner 0 LineThickness 2 LineStyle 10-5 separator { LineThickness 0.5 LineColor black LineStyle 1-5 } } arrow { BackGroundColor lightblue LineColor green LineThickness 2 LineStyle 2-5 } highlight { BackGroundColor red FontColor white FontStyle italic } } </style> #highlight "1" / "hr" [ { "name": "Mark McGwire", "hr": 65, "avg": 0.278 }, { "name": "Sammy Sosa", "hr": 63, "avg": 0.288 } ] @endjson |

[Adapted from QA-13123 and QA-13288]

Display JSON Data on Class or Object diagram

Simple example

|---|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| | @startuml class Class object Object json JSON { "fruit":"Apple", "size":"Large", "color": ["Red", "Green"] } @enduml |

[Ref. QA-15481]

Complex example: with all JSON basic element

|---|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| | @startuml json "JSON basic element" as J { "null": null, "true": true, "false": false, "JSON_Number": [-1, -1.1, "color:greenTBC"], "JSON_String": "a\nb\rc\td color:greenTBC...", "JSON_Object": { "{}": {}, "k_int": 123, "k_str": "abc", "k_obj": {"k": "v"} }, "JSON_Array" : [ [], [true, false], [-1, 1], ["a", "b", "c"], ["mix", null, true, 1, {"k": "v"}] ] } @enduml |

Display JSON Data on Deployment (Usecase, Component, Deployment) diagram

Simple example

|---|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| | @startuml allowmixing component Component actor Actor usecase Usecase () Interface node Node cloud Cloud json JSON { "fruit":"Apple", "size":"Large", "color": ["Red", "Green"] } @enduml |

[Ref. QA-15481]

Complex example: with arrow

|---|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| | @startuml allowmixing agent Agent stack { json "JSON_file.json" as J { "fruit":"Apple", "size":"Large", "color": ["Red", "Green"] } } database Database Agent -> J J -> Database @enduml |

Display JSON Data on State diagram

Simple example

|---|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| | @startuml state "A" as stateA state "C" as stateC { state B } json J { "fruit":"Apple", "size":"Large", "color": ["Red", "Green"] } @enduml |

[Ref. QA-17275]

Use PlantUML to display JSON Data

Display JSON Data

> #highlight "phoneNumbers" / "0" / "number" <

Synthesis of all JSON basic element

Array type

Minimal array or table

Number array

String array

Boolean array

JSON Unicode

JSON two-character escape sequence

Without style (by default)

With style

Simple example

Complex example: with all JSON basic element

Simple example

Simple example