Diagram jako kod z Mermaid w Lucidchart

Dostęp do diagramu jako menu kodu

Aby uzyskać dostęp do menu diagramu jako kodu w Lucidchart, wykonaj następujące kroki:

1. Wybierać ikonę Diagramu jako kodu na pasku narzędzi głównym, znajdującym się po lewej stronie obszaru roboczego.

Generuj diagramy

Zapoznaj się z procesem przetwarzania diagramu w kod, wykorzystując jeden z naszych przykładów dla każdego obsługiwanego typu diagramu. Gdy będziesz gotowy, wygeneruj diagram, wpisując własny kod Mermaid.

Użyj podanego przykładu

Aby utworzyć diagram przy użyciu podanych przykładów, wykonaj następujące kroki w menu diagramu jako kodu:

1. Wybierz +Nowy diagram syreny.
2. Na dole udostępnionego edytora kliknij jedną z przykładowych opcji.
3. Kod zostanie automatycznie dodany do edytora dla wybranego typu przykładu.
4. W razie potrzeby edytuj przykładowy kod.
5. Kliknij Generuj.

Schemat zostanie wygenerowany na stronie canvas.

Utwórz od podstaw za pomocą Mermaid

Aby utworzyć nowy diagram od podstaw przy użyciu kodu Mermaid, wykonaj następujące kroki w menu „Diagram jako kod”:

1. Wybierz +Nowy diagram syreny.
2. Wpisz kod w udostępnionym edytorze.
3. Kliknij Generuj.

Schemat zostanie wygenerowany na stronie canvas.

Edytuj diagram

Diagram wygenerowany z kodu jest wyświetlany jako obraz na stronie canvas i musi zostać zaktualizowany poprzez otwarcie i edycję kodu. Aby to zrobić:

1. Otwórz powiązany edytor kodu, korzystając z jednej z następujących metod:
   • Kliknij diagram na stronie canvas.
   • Przejdź do menu diagramu jako kodu, przewiń i wybierz diagram, który chcesz edytować.
2. Kliknij edytor i wprowadź zmiany.
   • Podczas edycji diagram w obszarze roboczym będzie aktualizowany w czasie rzeczywistym.

Schemat będzie aktualizowany na stronie canvas.

Obsługiwane typy diagramów

Kod Mermaid obsługuje następujące typy diagramów:

• Klasa: Zaplanuj strukturę konkretnego systemu, modelując jego klasy, atrybuty, operacje i relacje między obiektami.
• C4: Wykorzystaj cztery poziomy modeli (kontekst, kontenery, komponenty i kod) w zależności od odbiorców.
• związki encji: Wizualnie przedstaw bazę danych, aby pokazać relacje między polami.
• Schemat blokowy: Twórz łatwe do zrozumienia schematy blokowe obejmujące złożone systemy i procesy.
• Gantt: Wizualne przedstawienie harmonogramu i postępów podczas zarządzania projektem.
• Ishikawa: Tworzenie diagramów Ishikawy w celu wizualnego przedstawienia związków przyczynowo-skutkowych podczas analizy przyczyn źródłowych.
• Zagnieżdżona mapa drzewa: Wizualizacja hierarchicznych struktur danych przy użyciu zagnieżdżonych prostokątów.
• Wykres radarowy: /utworz/ wykres umożliwiający porównanie wielu zmiennych ilościowych na siatce promieniowej.
• Sekwencja: Przedstawia procesy i obiekty, które istnieją jednocześnie, a także wiadomości wymieniane między nimi w celu wykonania funkcji, zanim linia życia się zakończy.
• Stan: Zbuduj diagram zachowań, aby pokazać przejścia między różnymi obiektami.
• Wykres XY: /utworz/ kompleksowy wykres liniowy, słupkowy lub punktowy umożliwiający wizualizację zależności między punktami danych.

Najczęściej zadawane pytania

Jaką wersję systemu Mermaid obsługuje Lucidchart? 
Lucidchart jest zoptymalizowany pod kątem obsługi wersji 11.14 Mermaid. 

Jak nadać styl i format diagram wygenerowanemu za pomocą kodu Mermaid? 
Gdy generujesz diagram w Lucid za pomocą kodu Mermaid, jest on wyświetlany jako obraz w obszarze roboczym. Aby edytować styl i format diagram, należy dodać składnię stylu Mermaid bezpośrednio do kodu.

Przekaż opinię na temat tego artykułu