Edit in DokuwikiEdit in AsciidocEdit in Markdown

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.

🎉 Copied!

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

🛈 If you are looking for how to manipulate and manage JSON data on PlantUML: see rather Preprocessing JSON.

Edit in DokuwikiEdit in AsciidocEdit in Markdown

Complex example

You can use complex JSON structure.

🎉 Copied!

@startjson [ { "category": "트럭", "features": [ { "name": "연식", "example": "2010-05", "type": "string" } ], "subcategory": [ { "category": "트레일러", "subcategory": [ { "category": "컨테이너 트레일러", "subcategory": [ { "category": "콤바인샤시" }, { "category": "구즈넥(라인)샤시" }, { "category": "콤비라인샤시" } ], "features": [ { "name": "피트(ft)", "example": "20", "type": "int", "values": [ { "name": "20피트", "value": "20" }, { "name": "40피트", "value": "40" } ] } ] }, { "category": "평판 트레일러", "subcategory": [ { "category": "평판샤시" }, { "category": "로우베드" }, { "category": "삐딱이샤시" } ], "features": [ { "name": "평판 길이(mm)", "example": "6700", "type": "int", "min": 0, "max": 99999 } ] }, { "category": "탱크/덤프 트레일러", "subcategory": [ { "category": "BCT(벌크 시멘트 트레일러)" }, { "category": "탱크로리" }, { "category": "덤프츄레라" } ], "features": [ { "name": "루베(㎥)", "example": "30", "type": "int", "min": 0 } ] }, { "category": "밴형 트레일러", "subcategory": [ { "category": "윙 트레일러" }, { "category": "탑 트레일러" } ], "features": [ { "name": "냉동기 여부", "example": "Y", "type": "string", "values": [ { "name": "냉동기 있음", "value": "Y" }, { "name": "냉동기 없음", "value": "N" } ] } ] } ], "features": [ { "name": "복륜 여부", "example": "Y", "type": "string", "values": [ { "name": "복륜", "value": "Y" }, { "name": "단륜", "value": "N" } ] }, { "name": "리프팅 여부", "example": "Y", "type": "string", "values": [ { "name": "리프팅", "value": "Y" }, { "name": "리프팅 없음", "value": "N" } ] }, { "name": "앞축", "example": "1", "type": "int", "min": 2, "max": 6 }, { "name": "후축", "example": "2", "type": "int", "min": 2, "max": 6 } ] }, { "category": "트랙터", "features": [ { "name": "제조사", "example": "현대", "type": "string", "values": [ { "name": "현대", "value": "현대" }, { "name": "타타대우", "value": "타타대우" }, { "name": "볼보", "value": "볼보" }, { "name": "스카니아", "value": "스카니아" }, { "name": "벤츠", "value": "벤츠" }, { "name": "만", "value": "만" }, { "name": "이베코", "value": "이베코" } ] }, { "name": "모델명", "example": "FH", "type": "string", "values": [] }, { "name": "캡", "example": "표준탑", "type": "string", "values": [ { "name": "표준탑", "value": "표준탑" }, { "name": "중간탑", "value": "중간탑" }, { "name": "하이탑(글로벌)", "value": "하이탑(글로벌)" } ] }, { "name": "축", "example": "원데후(6X2)", "type": "string", "values": [ { "name": "원데후(6X2)", "value": "원데후(6X2)" }, { "name": "투데후(6X4)", "value": "투데후(6X4)" } ] }, { "name": "마력", "example": "380", "type": "int", "min": 0, "max": 9999 }, { "name": "변속기", "example": "자동", "type": "string", "values": [ { "name": "자동", "value": "자동" }, { "name": "수동", "value": "수동" } ] }, { "name": "주행거리", "example": "100000", "type": "int", "min": 0, "max": 999999 } ] } ] } ] @endjson

Edit in DokuwikiEdit in AsciidocEdit in Markdown

Highlight parts

🎉 Copied!

@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

Edit in DokuwikiEdit in AsciidocEdit in Markdown

Using different styles for highlight

It is possible to have different styles for different highlights.

🎉 Copied!

@startjson <style> .h1 { BackGroundColor green FontColor white FontStyle italic } .h2 { BackGroundColor red FontColor white FontStyle bold } </style> #highlight "lastName" #highlight "address" / "city" <<h1>> #highlight "phoneNumbers" / "0" / "number" <<h2>> { "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

[Ref. QA-15756, GH-1393]

Edit in DokuwikiEdit in AsciidocEdit in Markdown

JSON basic element

Synthesis of all JSON basic element

🎉 Copied!

@startjson { "null": null, "true": true, "false": false, "JSON_Number": [-1, -1.1, "<color:green>TBC"], "JSON_String": "a\nb\rc\td <color:green>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

Edit in DokuwikiEdit in AsciidocEdit in Markdown

JSON array or table

Array type

🎉 Copied!

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

Minimal array or table

Number array

🎉 Copied!

@startjson [1, 2, 3] @endjson

String array

🎉 Copied!

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

Boolean array

🎉 Copied!

@startjson [true, false, true] @endjson

Edit in DokuwikiEdit in AsciidocEdit in Markdown

JSON numbers

🎉 Copied!

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

Edit in DokuwikiEdit in AsciidocEdit in Markdown

JSON strings

JSON Unicode

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

🎉 Copied!

@startjson { "<color:blue><b>code": "<color:blue><b>value", "a\\u005Cb": "a\u005Cb", "\\uD83D\\uDE10": "\uD83D\uDE10", "😐": "😐" } @endjson

JSON two-character escape sequence

🎉 Copied!

@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 or not 😉, on the same item as \n management in PlantUML 😉 See Report Bug on QA-13066

🎉 Copied!

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

Edit in DokuwikiEdit in AsciidocEdit in Markdown

Minimal JSON examples

🎉 Copied!

@startjson "Hello world!" @endjson

🎉 Copied!

@startjson 42 @endjson

🎉 Copied!

@startjson true @endjson

(Examples come from STD 90 - Examples)

Edit in DokuwikiEdit in AsciidocEdit in Markdown

Empty table or list

🎉 Copied!

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

[Ref. QA-14397]

Edit in DokuwikiEdit in AsciidocEdit in Markdown

Using (global) style

Without style (by default)

🎉 Copied!

@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.

🎉 Copied!

@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]

Edit in DokuwikiEdit in AsciidocEdit in Markdown

Display JSON Data on Class or Object diagram

Simple example

🎉 Copied!

@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

🎉 Copied!

@startuml json "<b>JSON basic element" as J { "null": null, "true": true, "false": false, "JSON_Number": [-1, -1.1, "<color:green>TBC"], "JSON_String": "a\nb\rc\td <color:green>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

Edit in DokuwikiEdit in AsciidocEdit in Markdown

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

Simple example

🎉 Copied!

@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

🎉 Copied!

@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

Edit in DokuwikiEdit in AsciidocEdit in Markdown

Display JSON Data on State diagram

Simple example

🎉 Copied!

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

[Ref. QA-17275]

Edit in DokuwikiEdit in AsciidocEdit in Markdown

Creole on JSON

You can use Creole or HTML Creole on JSON diagram:

🎉 Copied!

@startjson { "Creole": { "wave": "~~wave~~", "bold": "**bold**", "italics": "//italics//", "stricken-out": "--stricken-out--", "underlined": "__underlined__", "not-underlined": "~__not underlined__", "wave-underlined": "~~wave-underlined~~" }, "HTML Creole": { "bold": "<b>bold", "italics": "<i>italics", "monospaced": "<font:monospaced>monospaced", "stroked": "<s>stroked", "underlined": "<u>underlined", "waved": "<w>waved", "green-stroked": "<s:green>stroked", "red-underlined": "<u:red>underlined", "blue-waved": "<w:#0000FF>waved", "Blue": "<color:blue>Blue", "Orange": "<back:orange>Orange background", "big": "<size:20>big" }, "Graphic": { "OpenIconic": "account-login <&account-login>", "Unicode": "This is <U+221E> long", "Emoji": "<:calendar:> Calendar", "Image": "<img:https://plantuml.com/logo3.png>" } } @endjson