如何在PlantUML中格式化用户数据为编辑器多行样式？

问题描述 #

我正在使用WebStorm的PlantUML Integration插件，现有一段PlantUML代码：

@startuml
!$user = {
           "name": "John Doe",
           "email": "john@gmail.com",
           "points": 100,
           "language": "en",
           "settings": {
             "notifications": {
               "email": true,
               "push": true,
               "sms": false
             }
           },
           "role": "user",
           "premiumId": "premiumId"
         }

HomePage -> HomePage: show loader
HomePage -> UserEndPoint : GET /user and check the user permissions
HomePage <- UserEndPoint : $user
HomePage -> UserFriendsEndPoint : GET /user/friends
HomePage -> UserMentorsEndPoint : GET /user/mentors
HomePage -> UserGoalsEndPoint : GET /user/goals
HomePage -> ContentEndPoint : GET /content
@enduml

生成的图中$user变量会被单行显示，但我希望它能以编辑器里的多行缩进样式展示：

{
           "name": "John Doe",
           "email": "john@gmail.com",
           "points": 100,
           "language": "en",
           "settings": {
             "notifications": {
               "email": true,
               "push": true,
               "sms": false
             }
           },
           "role": "user",
           "premiumId": "premiumId"
         }

尝试在字符串中添加\n换行符，要么显示异常要么报错，请问该如何实现？

解决方案 #

要实现多行缩进显示，需要将$user定义为带转义换行和引号的字符串，而不是直接赋值JSON对象。PlantUML中字符串内的换行用\n表示，内部的双引号需要用\"转义，同时保留缩进空格来维持格式。

方法一：使用\n转义换行 #

修改后的代码如下：

@startuml
!$user = "{\n           \"name\": \"John Doe\",\n           \"email\": \"john@gmail.com\",\n           \"points\": 100,\n           \"language\": \"en\",\n           \"settings\": {\n             \"notifications\": {\n               \"email\": true,\n               \"push\": true,\n               \"sms\": false\n             }\n           },\n           \"role\": \"user\",\n           \"premiumId\": \"premiumId\"\n         }"

HomePage -> HomePage: show loader
HomePage -> UserEndPoint : GET /user and check the user permissions
HomePage <- UserEndPoint : $user
HomePage -> UserFriendsEndPoint : GET /user/friends
HomePage -> UserMentorsEndPoint : GET /user/mentors
HomePage -> UserGoalsEndPoint : GET /user/goals
HomePage -> ContentEndPoint : GET /content
@enduml

方法二：使用|分隔换行（无需转义引号） #

如果你希望写法更简洁，可以用PlantUML的|符号分隔换行，缩进需要手动保留：

@startuml
!$user = "{
           |\"name\": \"John Doe\",
           |\"email\": \"john@gmail.com\",
           |\"points\": 100,
           |\"language\": \"en\",
           |\"settings\": {
           |  \"notifications\": {
           |    \"email\": true,
           |    \"push\": true,
           |    \"sms\": false
           |  }
           |},
           |\"role\": \"user\",
           |\"premiumId\": \"premiumId\"
         }"

HomePage -> HomePage: show loader
HomePage -> UserEndPoint : GET /user and check the user permissions
HomePage <- UserEndPoint : $user
HomePage -> UserFriendsEndPoint : GET /user/friends
HomePage -> UserMentorsEndPoint : GET /user/mentors
HomePage -> UserGoalsEndPoint : GET /user/goals
HomePage -> ContentEndPoint : GET /content
@enduml

两种方式都能让$user在生成的图中以多行缩进样式展示，推荐第一种用\n的方式，格式控制更精准。

内容的提问来源于stack exchange，提问作者Legeo