Untitled :: PlantUML Alternative Docs

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 parts

@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

[[#661111#FIXME]] FIXME or not 😉, on the same item as \n management in PlantUML 😉 See Report Bug on QA-13066 [[#661111#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 link::style-evolution[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]