PlantUML实践 | GUI原型

Posted 2021-04-17 Qt君

PlantUML提供salt模块用来帮助用户来设计图形接口，从而帮助用户快速开发产品模型。

简单对话框

sample_dialog.png

@startsalt
{+
	是否关闭窗口？
	[确定] | [取消]
}
@endsalt

登录界面

login.png

@startsalt
{+
	账号 | "user1"
	密码 | "****** "
	[登录] | [取消]
}
@endsalt

组合框

login_group.png

@startsalt
{^"登录界面"
	账号 | "user1"
	密码 | "****** "
	[登录] | [取消]
}
@endsalt

register_group.png

@startsalt
{^"注册界面"
	账号 | "user2"
	密码 | "****** "
	[登录] | [取消]
}
@endsalt

单选/复选按钮

radio_button.png

@startsalt
{^"单选按钮"
	() 单选按钮1
	(X) 单选按钮2
}
@endsalt

check_button.png

@startsalt
{^"复选按钮"
	[] 复选按钮1
	[X] 复选按钮2
}
@endsalt

下拉菜单

combobox.png

@startsalt
{
窗口模式：| ^全屏^
}
@endsalt

选项卡

option_bar.png

@startsalt
{
{/ <b>文件 | 编辑 | 工具 | 关于 }
}
@endsalt

菜单

menu.png

• 初始状态

@startsalt
{
{* File | Edit | Tools | Abort }
}
@endsalt

• 展开某个菜单
  

@startsalt
{
{* File | Edit | Tools | Abort
	File | New | Open File | - | Close | Close All }
}
@endsalt

表格

table.png

@startsalt
{#
. | 列1 | 列2
行1-0 | 行1-1 | 行1-2
行2-0 | 行2-1 | *
}
@endsalt

滚动条

• 具备水平与垂直的滚动条

@startsalt
{S
这是一个滚动条例子。
.
.
.
.
}
@endsalt

• 只有垂直滚动条

@startsalt
{SI
这是一个垂直滚动条例子。
.
.
.
.
}
@endsalt

• 只有水平滚动条

@startsalt
{S-
这是一个水平滚动条例子。
.
.
.
.
}
@endsalt

关于更多

• 在线plantuml画图
  http://www.plantuml.com/plantuml/uml/