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 <style> .h1 { BackGroundColor green FontColor white FontStyle italic } .h2 { BackGroundColor red FontColor white FontStyle bold } </style> #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, "color:greenTBC"], "JSON_String": "a\nb\rc\td color:greenTBC...", "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 { "color:bluecode": "color:bluevalue", "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 <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]

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

相关推荐
fouryears_2341714 小时前
什么是JSON,如何与Java对象转化
java·spring boot·spring·json
程序员编程指南15 小时前
Qt XML 与 JSON 数据处理方法
xml·c语言·c++·qt·json
快乐非自愿3 天前
C#解析JSON数据全攻略
数据库·c#·json
大熊程序猿3 天前
swagger json 转文档
json
南望无一3 天前
@uiw/react-json-view 如何修改文本省略号、null节点、数组节点等
前端·json
AI扶我青云志4 天前
bert模型中config.json中所有参数
人工智能·json·bert
kyle~4 天前
数据交换---JSON格式
服务器·microsoft·json
LuLaLuLaLeLLLLLL5 天前
Json Schema 学习笔记
笔记·学习·json
超龄超能程序猿5 天前
(5)从零开发 Chrome 插件:Vue3 Chrome 插件待办事项应用
javascript·vue.js·前端框架·json·html5
Mapmost6 天前
点云数据处理神器!一键生成3D Tiles,浏览器秒开无压力
json