PlantUML Language specification Json Diagram

       

Edit in DokuwikiEdit in AsciidocEdit in Markdown

Display JSON Data

• begin with @startjson keyword
• end with @endjson keyword.

🎉 Copied!

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

Edit in DokuwikiEdit in AsciidocEdit in Markdown

Complex example

🎉 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

🎉 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

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

🎉 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

🎉 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

Edit in DokuwikiEdit in AsciidocEdit in Markdown

Empty table or list

🎉 Copied!

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

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

🎉 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

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

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

🎉 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

Edit in DokuwikiEdit in AsciidocEdit in Markdown

Creole on JSON

🎉 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