用PlantUML可视化显示JSON

概述

PlantUML除了绘制UML中的一些标准图之外,也可以以图形化的方式显示一些其他图形或数据形式的结构,这其中就包括JSON。

它以一种简单且优美的图形形式,表达了JSON的结构。你可以用它来作为设计JSON数据文件的依据,辅助设计或理解。

绘制方法

起止符号

swift 复制代码
@startjson

@endjson

JSON对象

swift 复制代码
@startjson
{
	"name":"张三"
}
@endjson

效果如下:

JSON数组

swift 复制代码
@startjson
["Red","Green","Blue"]
@endjson

效果如下:

复杂结构

swift 复制代码
@startjson
{
	'文本
	"name":"色板1",
	'数组
	"colors":[
		"Red",
		"Green",
		"Blue",
		'子对象
		{
			"r":255,
			"g":255,
			"b":255
		}
	],
	'null
	"group":null,
	'空数组
	"tag":[],
	'数字 -- 整数和浮点数
	"index":3,
	"f":2.0,
	'布尔值
	"is_show":false,
	"readonly":true
}

@endjson

效果如下:

高亮条目

#highlight 跟上"key" / "key"形式的路,可以高亮条目。

遇上数组可以指定项的索引。

swift 复制代码
@startjson
'一级元素直接指定key
#highlight "name"
'子级元素指定路径
#highlight "colors" / 3 / "r" 
'数组元素可以指定索引
#highlight "colors" / 0
{
	'文本
	"name":"色板1",
	'数组
	"colors":[
		"Red",
		"Green",
		"Blue",
		'子对象
		{
			"r":255,
			"g":255,
			"b":255
		}
	],
	'null
	"group":null,
	'空数组
	"tag":[],
	'数字 -- 整数和浮点数
	"index":3,
	"f":2.0,
	'布尔值
	"is_show":false,
	"readonly":true
}

@endjson

绘制如下:

修改JSON图的样式

与其他PlantUML图一样,我们都可以设定图的元素的全局样式样式,或创建自定义样式类然后用<<类名>>形式引用。

swift 复制代码
<style>
'限定为JSON图设定样式
jsonDiagram {
    '所有节点
    node {
        '样式属性和值设定
    }
    '所有箭头
    arrow {
        '样式属性和值设定
    }
    '所有高亮
    highlight {
        '样式属性和值设定
    }
    '自定义样式类
    .red{
        '样式属性和值设定
    }
}
</style>
类与标签指定形式
swift 复制代码
@startjson
<style>
.red{
	BackGroundColor red
}
.green{
	BackGroundColor green
	FontColor white
}
.blue{
	BackGroundColor blue
	FontColor white
}
</style>


'一级元素直接指定key
#highlight "name" <<red>>
'子级元素指定路径
#highlight "colors" / 3 / "r"  <<green>>
'数组元素可以指定索引
#highlight "colors" / 0 <<blue>>
{
	'文本
	"name":"色板1",
	'数组
	"colors":[
		"Red",
		"Green",
		"Blue",
		'子对象
		{
			"r":255,
			"g":255,
			"b":255
		}
	],
	'null
	"group":null,
	'空数组
	"tag":[],
	'数字 -- 整数和浮点数
	"index":3,
	"f":2.0,
	'布尔值
	"is_show":false,
	"readonly":true
}

@endjson

绘制如下:

指定JSON图特有的元素样式
swift 复制代码
@startjson
<style>
jsonDiagram{
	node{
		BackGroundColor pink
		LineColor red
	}
	arrow{
		LineColor red
	}
	highlight{
		BackGroundColor orange
	}
	.red{
		BackGroundColor red
	}
}

</style>


'一级元素直接指定key
#highlight "name" <<red>>
'子级元素指定路径
#highlight "colors" / 3 / "r"
'数组元素可以指定索引
#highlight "colors" / 0
{
	'文本
	"name":"色板1",
	'数组
	"colors":[
		"Red",
		"Green",
		"Blue",
		'子对象
		{
			"r":255,
			"g":255,
			"b":255
		}
	],
	'null
	"group":null,
	'空数组
	"tag":[],
	'数字 -- 整数和浮点数
	"index":3,
	"f":2.0,
	'布尔值
	"is_show":false,
	"readonly":true
}

@endjson

绘制如下:

使用类MarkDown或HTML形式修饰JSON图元素

swift 复制代码
@startjson
{
"类MarkDown形式":
  {
  "粗体": "**粗体**",
  "斜体": "//斜体//",
  "删除线": "--删除线--"
  },
"类HTML形式":
  {
  "粗体": "<b>粗体",
  "斜体": "<i>斜体",
  "monospaced": "<font:monospaced>monospaced",
  "删除线": "<s>删除线",
  "下划线": "<u>下划线",
  "字色": "<color:blue>蓝色",
  "背景色": "<back:orange>橘色",
  "字号": "<size:20>20"
  }
}
@endjson

注意:语雀不支持的特性已经去除。完整语法参看:PlantUML:显示JSON数据

在其他图中显示JSON图

在其他一些图,如类图、对象图、用例图、组件图中等,都可以使用json关键字定义一个JSON结构并显示在图中。

下面以类图为例:

swift 复制代码
@startuml
class A
json Data{
	"name":"张三",
	"children":[
		{
			"name":"李四",
			"children":[]
		}
	]
}
@enduml

绘制效果如下:

可以看到,在专门的JSON图和在UML的一些图中创建的json元素,其图形样式和展示方式有所区别。

总结

  • 本篇基于官方文档的示例,自己上手试验,以及编写自己的实例,用来总结一下PlantUML中JSON数据的表示。
  • JSON的图形化或可视化,在Godot游戏设计中或许可以一用,用来在游戏文档或其他地方存储或表达自己的设计。
  • 可惜的是单独的JSON图目前不支持标题、页脚以及note等特性。
相关推荐
待磨的钝刨2 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
代码盗圣10 小时前
GODOT 4 不用scons编译cpp扩展的方法
游戏引擎·godot
小百菜16 小时前
dom4j实现xml转map,xml转json字符串
xml·json·xml转map·xml转json
yuchangchenTT18 小时前
就是这个样的粗爆,手搓一个计算器:JSON格式化计算器
前端·json·365快速计算器·在线计算器
engchina18 小时前
Python代码解析:处理JSON数据并导入Neo4j数据库
数据库·python·json
Mephisto.java1 天前
【大数据学习 | HBASE】hbase的整体架构
大数据·sql·oracle·json·hbase·database
东方巴黎~Sunsiny1 天前
优雅的遍历JSONArray,获取里面的数据
java·json
API快乐传递者2 天前
用 Python 爬取淘宝商品价格信息时需要注意什么?
java·开发语言·爬虫·python·json
Mephisto.java2 天前
【大数据学习 | kafka】kafka的偏移量管理
大数据·sql·oracle·sqlite·json·hbase
灰色人生qwer2 天前
JSON parse error: Unexpected end-of-input in VALUE_STRING
json