Выключен! Артефакт рисования IDEA здесь, в 10 раз быстрее, чем Visio!

Java задняя часть
Выключен! Артефакт рисования IDEA здесь, в 10 раз быстрее, чем Visio!

Программистам часто приходится рисовать диаграммы последовательности и блок-схемы в своей работе, особенно при написании документов. Обычно для рисования мы выбираем такие инструменты, как ProcessOn, но иногда может быть более эффективно рисовать с помощью кода, в конце концов, никто не знаком с кодом лучше, чем программисты. Сегодня я рекомендую инструмент для рисования PlantUML, который можно использовать с IDEA, чтобы сделать рисование более эффективным!

Адрес фактического центра электронной коммерции SpringBoot (50k+star):GitHub.com/macro-positive/…

Введение в PlantUML

PlantUML — это инструмент для рисования диаграмм UML с открытым исходным кодом, который поддерживает создание графики с помощью текста, что очень эффективно в использовании. Он может поддерживать рисование диаграмм последовательности, диаграмм классов, диаграмм объектов, диаграмм деятельности, карт разума и другой графики.

Давайте воспользуемся PlantUML, чтобы нарисовать блок-схему, которую можно просмотреть в режиме реального времени, и скорость очень высока!

Установить

Несомненно, удобнее всего использовать PlantUML, установив плагин в IDEA.Далее установим плагин PlantUML в IDEA.

  • Первый поиск на рынке плагинов IDEAPlantUML, установите этот плагин №1;

  • Иногда, если сеть плохая, она может не загрузиться, вы можете нажатьPlguin homepageкнопку для доступа к домашней странице плагина, а затем выберите соответствующую версию для загрузки сжатого пакета;

  • После успешной загрузки выберите локальную установку.

использовать

Затем мы используем подключаемый модуль PlantUML для рисования диаграмм последовательности, диаграмм вариантов использования, диаграмм классов, диаграмм деятельности и ментальных карт, чтобы проверить, действительно ли PlantUML прост в использовании!

Временная диаграмма

Sequence Diagram — это диаграмма взаимодействия UML. Он показывает динамическое сотрудничество между несколькими объектами, описывая хронологический порядок, в котором сообщения передаются между ними. Когда мы изучаем Oauth 2, первым шагом является понимание процесса Oauth 2. В настоящее время полезно иметь диаграмму последовательности. Ниже мы используем PlantUML, чтобы нарисовать диаграмму последовательности выпуска токенов с использованием шаблона кода авторизации в Oauth2.

  • Во-первых, нам нужно создать новый файл PlantUML и выбрать диаграмму последовательности;

  • Мы можем сгенерировать диаграмму последовательности Oauth2 с помощью синтаксиса, предоставленного PlantUML.Синтаксис по-прежнему очень прост.Подробности следующие:
@startuml
title Oauth2令牌颁发之授权码模式

actor User as user
participant "User Agent" as userAgent
participant "Client" as client
participant "Auth Login" as login
participant "Auth Server" as server

autonumber
user->userAgent:访问客户端
activate userAgent
userAgent->login:重定向到授权页面+clientId+redirectUrl
activate login
login->server:用户名+密码+clientId+redirectUrl
activate server
server-->login:返回授权码
login-->userAgent:重定向到redirectUrl+授权码code
deactivate login
userAgent->client:使用授权码code换取令牌
activate client
client->server:授权码code+clientId+clientSecret
server-->client:颁发访问令牌accessToken+refreshToken
deactivate server
client-->userAgent:返回访问和刷新令牌
deactivate client
userAgent--> user:令牌颁发完成
deactivate userAgent
@enduml
  • Код сгенерирует следующую диаграмму последовательности, достаточно ли круто нарисовать диаграмму последовательности, написав код?

  • Ключевые описания этой временной диаграммы следующие:
    • titleМожет использоваться для указания заголовка диаграммы UML;
    • пройти черезactorУчастники, которые могут претендовать на гуманоида;
    • пройти черезparticipantМогут быть объявлены общие типы акторов;
    • пройти черезasУчастникам можно давать псевдонимы;
    • пройти через->Отношения между участниками можно нарисовать, можно использовать пунктирные стрелки-->;
    • После каждого отношения участника вы можете использовать:Добавьте описание отношения;
    • пройти черезautonumberМы можем автоматически добавлять серийные номера к отношениям участников;
    • пройти черезactivateиdeactivateМожно указать линию жизни участника.
  • Здесь есть и более волшебная функция: когда мы щелкаем правой кнопкой мыши по диаграмме последовательности, мы можем сгенерировать ссылку для онлайн-доступа;

  • Перейдя прямо по этой ссылке, вы можете получить доступ к диаграммам последовательности UML онлайн и редактировать их, разве это не круто!

диаграмма вариантов использования

Диаграмма вариантов использования — это простейшее представление взаимодействия пользователя с системой, показывающее взаимосвязь между пользователем и связанными с ним вариантами использования. С помощью диаграммы вариантов использования мы можем легко выразить взаимосвязь между различными ролями и вариантами использования в системе.Затем мы используем PlantUML для рисования диаграммы вариантов использования.

  • Во-первых, нам нужно создать новый файл PlantUML и выбрать диаграмму вариантов использования, которая используется для представления отношений между клиентами, поварами, гурманами и различными вариантами использования в ресторанах.Подробности следующие:
@startuml
left to right direction
actor Guest as g
package Professional {
    actor Chief as c
    actor "Food Critic" as fc
}
package Restaurant {
    usecase "Eat Food" as uc1
    usecase "Pay For Food" as uc2
    usecase "Drink" as uc3
    usecase "Review" as uc4
}
g--> uc1
g--> uc2
g--> uc3
fc--> uc4
@enduml
  • Код сгенерирует следующую диаграмму вариантов использования;

  • Ключевые описания этой диаграммы вариантов использования следующие:
    • left to right directionУказывает, что диаграмма вариантов использования рисуется в порядке слева направо, по умолчанию — сверху вниз;
    • пройти черезpackageСимволы могут быть сгруппированы и варианты использования;
    • пройти черезactorПользователи могут быть определены;
    • пройти черезusecaseВарианты использования могут быть определены;
    • Можно использовать взаимосвязь между ролями и вариантами использования.-->Представлять.

Диаграмма классов

Диаграмма классов может представлять статическую структуру класса, такую ​​как свойства и методы, содержащиеся в классе, и структуру наследования класса. Затем мы используем PlantUML для рисования диаграммы классов.

  • Во-первых, нам нужно создать новый файл PlantUML и выбрать диаграмму классов, которая используется для представления структуры классов Person, Student и Teacher.Подробности следующие:
@startuml
class Person {
    # String name
    # Integer age
    + void move()
    + void say()
}
class Student {
    - String studentNo
    + void study()
}
class Teacher {
    - String teacherNo
    + void teach()
}
Person <|-- Student
Person <|-- Teacher
@enduml
  • Код сгенерирует следующую диаграмму классов, посмотрите на код и диаграмму классов, вы обнаружите, что это очень похоже на то, как мы определяем классы с помощью кода;

  • Ключевые описания этого типа диаграммы следующие:
    • пройти черезclassкласс может быть определен;
    • Видимость можно определить, добавив символы слева от свойств и методов,-выражатьprivate,#выражатьprotected,+выражатьpublic;
    • пройти через<|--Указывает отношение наследования между классами.

диаграмма деятельности

Диаграмма активности — это UML-диаграмма, которую мы используем чаще, и она часто используется для представления бизнес-процессов, например, с ее помощью можно представить процесс заказа в электронной коммерции. Затем мы используем PlantUML для рисования диаграммы деятельности.

  • Во-первых, нам нужно создать новый файл PlantUML и выбрать диаграмму деятельности.Здесь используется процесс создания подтверждения заказа в корзине в проекте торгового центра.Подробности следующие:
@startuml
title 生成确认单流程
start
:获取购物车信息并计算好优惠;
:从ums_member_receive_address表中\n获取会员收货地址列表;
:获取该会员所有优惠券信息;
switch(根据use_type判断每个优惠券是否可用)
case(0)
    :全场通用;
    if (判断所有商品总金额是否\n满足使用起点金额) then (否)
        :得到用户不可用优惠券列表;
        stop
    endif
case(-1)
    :指定分类;
    if (判断指定分类商品总金额\n是否满足使用起点金额) then (否)
        :得到用户不可用优惠券列表;
        stop
    endif
case(-2)
    :判断指定商品总金额是否满足使用起点金额;
    if (判断指定分类商品总金额\n是否满足使用起点金额) then (否)
        :得到用户不可用优惠券列表;
        stop
    endif
endswitch
:得到用户可用优惠券列表;
:获取用户积分;
:获取积分使用规则;
:计算总金额，活动优惠，应付金额;
stop
@enduml
  • Код сгенерирует следующую диаграмму действий, в которой мы можем либо использоватьif else, и вы можете использоватьswitch, вы даже можете использоватьwhile循环, функция все еще довольно мощная;

  • Ключевые описания этой диаграммы деятельности следующие:
    • пройти черезstartиstopМожет указывать на начало и конец процесса;
    • пройти через:и;Добавьте текст в середине, чтобы определить узел процесса действия;
    • пройти черезif+then+endifДайте определение условному суждению;
    • пройти черезswitch+case+endswitchОпределите решение о переключении.

карта разума

Интеллект-карта — это эффективный графический инструмент для выражения дивергентного мышления, простой, но очень эффективный и практичный инструмент мышления. Я использовал его во многих местах в своем учебном пособии по торговому центру. Давайте использовать PlantUML для рисования карты разума.

  • Во-первых, нам нужно создать новый файл PlantUML и выбрать интеллект-карту.Здесь используется представление схемы в маршруте обучения в торговом центре.Подробности следующие:
@startmindmap
+[#17ADF1] mall学习路线
++[#lightgreen] 推荐资料
++[#lightblue] 后端技术栈
+++_ 项目框架
+++_ 数据存储
+++_ 运维部署
+++_ 其他
++[#orange] 搭建项目骨架
++[#1DBAAF] 项目部署
+++_ Windows下的部署
+++_ Linux下使用Docker部署
+++_ Linux下使用Docker Compose部署
+++_ Linux下使用Jenkins自动化部署
--[#1DBAAF] 电商业务
---_ 权限管理模块
---_ 商品模块
---_ 订单模块
---_ 营销模块
--[#orange] 技术要点
--[#lightblue] 前端技术栈
--[#lightgreen] 进阶微服务
---_ Spring Cloud技术栈
---_ 项目部署
---_ 技术要点
--[#yellow] 开发工具
--[#lightgrey] 扩展学习
@endmindmap
  • Код сгенерирует следующую карту разума.На самом деле, используя PlantUML, мы можем сами определить стиль графика.Здесь я настроил цвет;

  • Ключевые моменты этой ментальной карты следующие:
    • пройти через+и-Он может представлять узлы на карте разума и имеет направленность;
    • пройти через[#颜色]Вы можете определить цвет границы узла;
    • пройти через_Границу узла можно удалить;

Суммировать

Хотя существует множество графических инструментов, которые могут рисовать диаграммы UML, для программистов может быть более прямым и эффективным использовать код для рисования, особенно с IDEA. Если вы хотите использовать код для рисования, попробуйте PlantUML.

использованная литература

Официальная документация:plantuml.com/zh/

Эта статьяGitHubGitHub.com/macro-positive/…Записано, приветствую всех на Star!

Категории