PlantUML Language specification Json Diagram

       

Edit in DokuwikiEdit in AsciidocEdit in Markdown

JSON数据可视化

• 开始关键字 @startjson
• 结束关键字 @endjson

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

Edit in DokuwikiEdit in AsciidocEdit in Markdown

复杂一些的例子

@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

Edit in DokuwikiEdit in AsciidocEdit in Markdown

如何高亮显示

@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

使用不同风格的高亮

@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基本类型

所有支持的JSON类型

@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 数组或表格

数组

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

最小化的数组或表格

数字类型数组

@startjson [1, 2, 3] @endjson

字符串类型数组

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

布尔型数组

@startjson [true, false, true] @endjson

Edit in DokuwikiEdit in AsciidocEdit in Markdown

JSON 数字

@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 字符串

JSON Unicode

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

JSON 双字符转义序列

@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

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

Edit in DokuwikiEdit in AsciidocEdit in Markdown

最小化 JSON 的例子

@startjson "Hello world!" @endjson

@startjson 42 @endjson

@startjson true @endjson

Edit in DokuwikiEdit in AsciidocEdit in Markdown

空表格或列表

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

Edit in DokuwikiEdit in AsciidocEdit in Markdown

使用管局样式或局部样式

无样式的情况 (默认)

@startjson #highlight "1" / "hr" [ { "name": "Mark McGwire", "hr": 65, "avg": 0.278 }, { "name": "Sammy Sosa", "hr": 63, "avg": 0.288 } ] @endjson

增加样式

@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

使用类或者对象的像是显示JSON数据

简单例子

@startuml class Class object Object json JSON { "fruit":"Apple", "size":"Large", "color": ["Red", "Green"] } @enduml

复杂例子: 包括所有的JSON的结构

@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

在部署图中显示JSON数据（用例，组件，部署）

简单例子

@startuml allowmixing component Component actor Actor usecase Usecase () Interface node Node cloud Cloud json JSON { "fruit":"Apple", "size":"Large", "color": ["Red", "Green"] } @enduml

@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

在状态图中显示JSON数据

简单例子

@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

@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