シーケンス図 ユースケース図 クラス図 アクティビティ図 コンポーネント図 状態図 オブジェクト図 配置図 タイミング図 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データを可視化することができます。

この機能を使うには、

🎉 Copied! 

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

🛈 If you are looking for how to manipulate and manage JSON data on PlantUML: see rather Preprocessing JSON.
WARNING
 This translation need to be updated. 
WARNING

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
Using different styles for highlight

It is possible to have different styles for different highlights.

🎉 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

シンプルな配列またはテーブル

Number配列

🎉 Copied! 

@startjson
[1, 2, 3]
@endjson

String配列

🎉 Copied! 

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

Boolean配列

🎉 Copied! 

@startjson
[true, false, true]
@endjson

Edit in DokuwikiEdit in AsciidocEdit in Markdown
number型

🎉 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
string型

Unicode

JSONではUnicodeを直接記述するか、\uXXXXのような形式でエスケープして記述することができます。

🎉 Copied! 

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

2文字のエスケープシーケンス

🎉 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

(Examples come from STD 90 - Examples)

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Empty table or list

🎉 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

スタイル有り

スタイルを指定して、要素の見た目を変更することができます。

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

[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

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

[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

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

[Ref. QA-17275]

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Creole on JSON

You can use Creole or HTML Creole on JSON diagram:

🎉 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