原文地址：fredgrott.medium.com/easy-uml-ge…
发布时间：2021年8月21日-3分钟阅读
这里有一个真正简单的方法来为你的Flutter应用代码生成UML图。
UML设置
我们可以使用DCDG插件，它嵌入了plantUML插件来生成UML图。
PlantUML是一个可以快速编写.NET的组件。也支持以下非UML图。图是...
plantuml.com
一个小型的命令行工具，用于从Dart包中生成一个类（UML或类似）图。下面是一个UML图。
pub.dev
它是一个Dart二进制文件，因此我们从终端安装它。
pub global activate dcdg
另一部分是在docs中设置三个文件夹(out, src, and style)，并将其存储在报告项目子文件夹中，因为该设置与IDE插件集成，将plantUMl文件转换为图形文件。这两个样式文件将是这些。
# Style Presets
@startuml
' Preset Styles by Jeriel Jan
' Preset: Monochrome
!define STYLE_DEFAULT_ACCENT #000
!define STYLE_DEFAULT_BGC #FFF
!define STYLE_DEFAULT_FGC #000
' Preset: Material Light Blue (200)
!define STYLE_LIGHT_ACCENT #81D4FA
!define STYLE_LIGHT_BGC #FFF
!define STYLE_LIGHT_FGC #000
' Preset: Material Light Blue (800)
!define STYLE_DARK_ACCENT #0277BD
!define STYLE_DARK_BGC #FFF
!define STYLE_DARK_FGC #000
' Preset: Material Light Blue (800)
!define STYLE_MIDNIGHT_ACCENT #0277BD
!define STYLE_MIDNIGHT_BGC #000
!define STYLE_MIDNIGHT_FGC #FFF
skinparam {
' This field left intentionally blank.
}
@enduml
# Project Stylesheet
@startuml
' Load preset styles.
!define STYLEPATH .
!include STYLEPATH/style-presets.iuml
' Color Definition
' Choose the style you want by applying them here.
!define STYLE_ACCENT STYLE_DEFAULT_FGC
!define STYLE_BGC STYLE_DEFAULT_BGC
!define STYLE_FGC STYLE_DEFAULT_FGC
' RECOMMENDED STYLE
' -=- DO NOT EDIT THIS SECTION. -=-
' See Custom Style section below to override items here.
skinparam {
' Global Options
DPI 200
Shadowing false
DefaultFontName Roboto Condensed
DefaultMonospacedFontName Inconsolata
DefaultFontColor STYLE_FGC
' Styles - Borders
ArrowColor STYLE_ACCENT
ActivityBorderColor STYLE_ACCENT
ActivityDiamondBorderColor STYLE_ACCENT
ActorBorderColor STYLE_ACCENT
AgentBorderColor STYLE_ACCENT
ArtifactBorderColor STYLE_ACCENT
BoundaryBorderColor STYLE_ACCENT
ClassBorderColor STYLE_ACCENT
CloudBorderColor STYLE_ACCENT
CollectionsBorderColor STYLE_ACCENT
ComponentBorderColor STYLE_ACCENT
ControlBorderColor STYLE_ACCENT
DatabaseBorderColor STYLE_ACCENT
EntityBorderColor STYLE_ACCENT
FileBorderColor STYLE_ACCENT
FolderBorderColor STYLE_ACCENT
FrameBorderColor STYLE_ACCENT
InterfaceBorderColor STYLE_ACCENT
LegendBorderColor STYLE_ACCENT
NodeBorderColor STYLE_ACCENT
NoteBorderColor STYLE_ACCENT
ObjectBorderColor STYLE_ACCENT
PackageBorderColor STYLE_ACCENT
ParticipantBorderColor STYLE_ACCENT
PartitionBorderColor STYLE_ACCENT
QueueBorderColor STYLE_ACCENT
RectangleBorderColor STYLE_ACCENT
SequenceBoxBorderColor STYLE_ACCENT
SequenceDividerBorderColor STYLE_ACCENT
SequenceGroupBorderColor STYLE_ACCENT
SequenceLifeLineBorderColor STYLE_ACCENT
SequenceReferenceBorderColor STYLE_ACCENT
StackBorderColor STYLE_ACCENT
StateBorderColor STYLE_ACCENT
StorageBorderColor STYLE_ACCENT
SwimlaneBorderColor STYLE_ACCENT
UsecaseBorderColor STYLE_ACCENT
' Styles - Backgrounds
ActivityBackgroundColor STYLE_BGC
ActivityDiamondBackgroundColor STYLE_BGC
ActorBackgroundColor STYLE_BGC
AgentBackgroundColor STYLE_BGC
ArtifactBackgroundColor STYLE_BGC
BackgroundColor STYLE_BGC
BoundaryBackgroundColor STYLE_BGC
ClassBackgroundColor STYLE_BGC
ClassHeaderBackgroundColor STYLE_BGC
CloudBackgroundColor STYLE_BGC
CollectionsBackgroundColor STYLE_BGC
ComponentBackgroundColor STYLE_BGC
ControlBackgroundColor STYLE_BGC
DatabaseBackgroundColor STYLE_BGC
EntityBackgroundColor STYLE_BGC
FileBackgroundColor STYLE_BGC
FolderBackgroundColor STYLE_BGC
FrameBackgroundColor STYLE_BGC
IconPackageBackgroundColor STYLE_BGC
IconPrivateBackgroundColor STYLE_BGC
IconProtectedBackgroundColor STYLE_BGC
IconPublicBackgroundColor STYLE_BGC
InterfaceBackgroundColor STYLE_BGC
LegendBackgroundColor STYLE_BGC
NodeBackgroundColor STYLE_BGC
NoteBackgroundColor STYLE_BGC
ObjectBackgroundColor STYLE_BGC
PackageBackgroundColor STYLE_BGC
ParticipantBackgroundColor STYLE_BGC
PartitionBackgroundColor STYLE_BGC
QueueBackgroundColor STYLE_BGC
RectangleBackgroundColor STYLE_BGC
SequenceBoxBackgroundColor STYLE_BGC
SequenceDividerBackgroundColor STYLE_BGC
SequenceGroupBackgroundColor STYLE_BGC
SequenceGroupBodyBackgroundColor STYLE_BGC
SequenceLifeLineBackgroundColor STYLE_BGC
SequenceReferenceBackgroundColor STYLE_BGC
SequenceReferenceHeaderBackgroundColor STYLE_BGC
StackBackgroundColor STYLE_BGC
StateBackgroundColor STYLE_BGC
StereotypeABackgroundColor STYLE_BGC
StereotypeCBackgroundColor STYLE_BGC
StereotypeEBackgroundColor STYLE_BGC
StereotypeIBackgroundColor STYLE_BGC
StereotypeNBackgroundColor STYLE_BGC
StorageBackgroundColor STYLE_BGC
TitleBackgroundColor STYLE_BGC
UsecaseBackgroundColor STYLE_BGC
' -=- END OF RECOMMENDED STYLE -=-
' Other Settings
' These settings are included in the language specs, but
' it's not recommended to be applied.
'TitleBorderColor STYLE_ACCENT
'DiagramBorderColor STYLE_ACCENT
' CUSTOM STYLE
' All items below can be safely commented out.
' This will override the options listed above.
roundcorner 8
'Monochrome true
NoteFontName Roboto Condensed
NoteFontStyle Italic
'NoteBackgroundColor STYLE_BGC
}
@enduml
然后是一个终端命令，即
dcdg -o reports/doc/src/uml.puml
而输出的结果是：。
@startuml
set namespaceSeparator ::
class "basic_uml::main.dart::MyApp" {
+Widget build()
}
class "basic_uml::main.dart::MyHomePage" {
+String title
+State<MyHomePage> createState()
}
class "basic_uml::main.dart::_MyHomePageState" {
-int _counter
-void _incrementCounter()
+Widget build()
}
@enduml
将puml文件转换为图形文件的两个IDE插件是。
PlantUML - Visual Studio Marketplace
为Visual Studio Code提供丰富的PlantUML支持。通过支付宝捐款|通过阿里巴巴捐款|PlantUML文件 服务器渲染...
Marketplace.visualstudio.com
PlantUML集成 - IntelliJ IDEs Plugin | Marketplace
PlantUML图解工具的集成。现在更好、更快，有了代码导航和高亮显示。
plugins.jetbrains.com
而它通过IDE插件的图形输出看起来是这样的。
来源
我的devops资料可以在这个repo中找到。
GitHub - fredgrott/flutter_devops: flutter devops
Permalink Failed to load latest commit information. 如何实现Flutter项目的核心DevOPS。 flutter devops...
github.com
结论
生成一个 UML 来解释 Flutter App 的结构是很简单的。
