Use PlantUML to display JSON Data

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.

@startjson { "fruit":"Apple", "size":"Large", "color": ["Red", "Green"] } @endjson

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 #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, "TBC"], "JSON_String": "a\nb\rc\td TBC...", "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

@startjson { "DecimalNumber": [-1, 0, 1], "DecimalNumber . Digits": [-1.1, 0.1, 1.1], "DecimalNumber ExponentPart": [1E5] } @endjson

JSON strings

JSON Unicode

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

@startjson { "code": "value", "a\\u005Cb": "a\u005Cb", "\\uD83D\\uDE10": "\uD83D\uDE10", "": "" } @endjson

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 #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, "TBC"], "JSON_String": "a\nb\rc\td TBC...", "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]