Mermaid: различия между версиями

Материал из Поле цифровой дидактики
 
(не показано 9 промежуточных версий этого же участника)
Строка 1: Строка 1:
{{DigitalTool
|Description=Средство создания изображения диаграмм из кода, написанного на языке разметки.
|Affordances=Создание диаграмм различного типа внутри html документов
Создание и сохранение диаграмм для использования внутри документов
|Область применения=образование
|Website=https://mermaid-js.github.io/mermaid/#/
|End users=Учащиеся, Преподаватели
|Tool is made for=диаграммы
|distant_collab=Да
|Language_Ru_Eng=English
|AI=Нет
}}
; Возможность попробовать Mermaid диаграммы без регистрации
: https://workflow.jace.pro/ - возможность создать диаграмму и сохранить её в различных форматах
: https://mermaid-js.github.io/mermaid-live-editor
== Какие бывают UML диаграммы ==
=== Диаграммы классов ===
* [[Mermaid/ClassDiagram]]
{{#ask:  [[[Mermaid/ClassDiagram]] |format=embedded }}


=== Диаграмма классов - classDiagram ===
=== Диаграммы последовательностей ===
* https://mermaid-js.github.io/mermaid/#/classDiagram


{{#mermaid:classDiagram
* [[Mermaid/SequenceDiagram]]
  direction LR
classA --|> classB : Inheritance
classC --* classD : Composition
classE --o classF : Aggregation
classG --> classH : Association
classI -- classJ : Link(Solid)
classK ..> classL : Dependency
classM ..|> classN : Realization
classO .. classP : Link(Dashed)


}}
{{#ask:  [[[Mermaid/SequenceDiagram]] |format=embedded }}
 
 
== Mermaid/Flowchart ==


=== Диаграмма последовательности ===
[[Mermaid/Flowchart]]
{{#mermaid:sequenceDiagram
    participant dotcom
    participant iframe
    participant viewscreen
    dotcom->>iframe: loads html w/ iframe url
    iframe->>viewscreen: request template
    viewscreen->>iframe: html & javascript
    iframe->>dotcom: iframe ready
    dotcom->>iframe: set mermaid data on iframe
    iframe->>iframe: render mermaid
}}


=== Диаграмма последовательности ===
{{#mermaid:sequenceDiagram
participant Alice
participant Bob
  Alice->John: Hello John, how are you?
  loop Healthcheck
      John->John: Fight against hypochondria
  end
  Note right of John: Rational thoughts <br/>prevail...
    John-->Alice: Great!
    John->Bob: How about you?
    Bob-->John: Jolly good!
}}


----
----
 
[[Категория:DigitalTool]]
{{#mermaid:sequenceDiagram
actor A
A-->B: Привет
}}

Текущая версия на 20:41, 15 марта 2024

Краткое описание инструмента Средство создания изображения диаграмм из кода, написанного на языке разметки.
Возможности Создание диаграмм различного типа внутри html документов

Создание и сохранение диаграмм для использования внутри документов

Трудности использования
Область знаний
Область применения образование
Поясняющее видео
Веб-сайт https://mermaid-js.github.io/mermaid/#/
Пользователи Учащиеся, Преподаватели
Используется для создания (проведения) диаграммы
Разработчик
Сообщество вокруг средства
Лицензия
Год первого релиза
Совместное сетевое использование Да
Какой язык основной English
Есть ли поддержка Искусственным Интеллектом Нет
Возможность попробовать Mermaid диаграммы без регистрации
https://workflow.jace.pro/ - возможность создать диаграмму и сохранить её в различных форматах
https://mermaid-js.github.io/mermaid-live-editor

Какие бывают UML диаграммы

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

Mermaid/ClassDiagram

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

Связи классов между собой
значения стрелочек:

Категории и свойства

Страница Вики

State


Диаграммы последовательностей

Mermaid/SequenceDiagram

Диаграмма последовательности


Диаграмма последовательности



Mermaid/Flowchart

Mermaid/Flowchart


Источник — http://digida.mgpu.ru/index.php?title=Mermaid&oldid=16235