时序图 用例图 类图 活动图 组件图 状态图 对象图 部署图 定时图 Regex Network Wireframe Archimate Gantt MindMap WBS EBNF JSON YAML
PlantUML Language specification Json Diagram

Edit in DokuwikiEdit in AsciidocEdit in Markdown
JSON数据可视化

JSON 在软件中被广泛应用.

你可以用PlantUML来将JSON数据可视化。

使用如下的语法激活json可视化语法：

🎉 Copied! 

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

🛈 PlantUML处理JSON的更多细节: 可以查看 Preprocessing JSON.

Edit in DokuwikiEdit in AsciidocEdit in Markdown
复杂一些的例子

一些结构复杂的JSON数据也能轻松查看

🎉 Copied! 

@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
如何高亮显示

🎉 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
使用不同风格的高亮

你可以使用不同的风格来显示高亮效果。

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

所有支持的JSON类型

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

数组

🎉 Copied! 

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

最小化的数组或表格

数字类型数组

🎉 Copied! 

@startjson
[1, 2, 3]
@endjson

字符串类型数组

🎉 Copied! 

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

布尔型数组

🎉 Copied! 

@startjson
[true, false, true]
@endjson

Edit in DokuwikiEdit in AsciidocEdit in Markdown
JSON 数字

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

JSON Unicode

在JSON图表中，你可以是直接使用Unicode或者使用反斜线格式 \uXXXX.

🎉 Copied! 

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

JSON 双字符转义序列

🎉 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-13066
FIXME

🎉 Copied! 

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

Edit in DokuwikiEdit in AsciidocEdit in Markdown
最小化 JSON 的例子

🎉 Copied! 

@startjson
"Hello world!"
@endjson

🎉 Copied! 

@startjson
42
@endjson

🎉 Copied! 

@startjson
true
@endjson

(例子来源 STD 90 - Examples)

Edit in DokuwikiEdit in AsciidocEdit in Markdown
空表格或列表

🎉 Copied! 

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

[Ref. QA-14397]

Edit in DokuwikiEdit in AsciidocEdit in Markdown
使用管局样式或局部样式

无样式的情况 (默认)

🎉 Copied! 

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

增加样式

你可以使用语法 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

[Adapted from QA-13123 and QA-13288]

Edit in DokuwikiEdit in AsciidocEdit in Markdown
使用类或者对象的像是显示JSON数据

简单例子

🎉 Copied! 

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

[Ref. QA-15481]

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

🎉 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
在部署图中显示JSON数据（用例，组件，部署）

简单例子

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

复杂例子: 带箭头

🎉 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
在状态图中显示JSON数据

简单例子

🎉 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

在wiki标记语言或HTML标记语言中使用JSON Creole or HTML Creole:

🎉 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