PlantUML Language specification Json Diagram

       

Edit in DokuwikiEdit in AsciidocEdit in Markdown

JSONデータを表示する

• @startjsonキーワードで開始し、
• @endjsonキーワードで終了する必要があります。

@startjson { "fruit":"Apple", "size":"Large", "color":"Red" } @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

Using different styles for highlight

@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

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

Number配列

@startjson [1, 2, 3] @endjson

String配列

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

Boolean配列

@startjson [true, false, true] @endjson

Edit in DokuwikiEdit in AsciidocEdit in Markdown

number型

@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

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

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

@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

Empty table or list

@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

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

Complex example: with all JSON basic element

@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

@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

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

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