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
|
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
 |
🎉 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
|
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
|
Array type 🎉 Copied!
| @startjson
{
"Numeric": [1, 2, 3],
"String ": ["v1a", "v2b", "v3c"],
"Boolean": [true, false, true]
}
@endjson
|
Minimal array or tableNumber array 🎉 Copied!
| @startjson
[1, 2, 3]
@endjson
|
String array 🎉 Copied!
| @startjson
["1a", "2b", "3c"]
@endjson
|
Boolean array 🎉 Copied!
| @startjson
[true, false, true]
@endjson
|
🎉 Copied!
| @startjson
{
"DecimalNumber": [-1, 0, 1],
"DecimalNumber . Digits": [-1.1, 0.1, 1.1],
"DecimalNumber ExponentPart": [1E5]
}
@endjson
|
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 FIXME or not 😉, on the same item as \n management in PlantUML 😉 See Report Bug on QA-13066FIXME 🎉 Copied!
| @startjson
[
"\\\\",
"\\n",
"\\r",
"\\t"
]
@endjson
|
🎉 Copied!
| @startjson
"Hello world!"
@endjson
|
🎉 Copied!
| |
🎉 Copied!
| |
(Examples come from STD 90 - Examples) 🎉 Copied!
| @startjson
{
"empty_tab": [],
"empty_list": {}
}
@endjson
|
[Ref. QA-14397]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]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
|
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
|
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] | |
Highlight parts
Edit in Dokuwiki
Edit in Asciidoc
Edit in Markdown
