ホーム新着情報入門Online Server実行方法F.A.Q.ダウンロードフォーラム(英語)Theme前処理標準ライブラリHitchhiker's GuidePDFガイド
PlantUMLLanguage specificationJson Diagram

Edit in DokuwikiEdit in AsciidocEdit in Markdown
JSONデータを表示する

JSON形式は、様々なソフトウェアで使われています。

PlantUMLを使ってJSONデータを可視化することができます。

この機能を使うには、
  • @startjsonキーワードで開始し、
  • @endjsonキーワードで終了する必要があります。

🎉 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"
  }
}
@endjson

Privacy Policy      Advertise