PlantUML & Diagrammi

Crea diagrammi professionali direttamente nel Markdown

Cos'è PlantUML?

PlantUML è un linguaggio per creare diagrammi UML (e non solo) a partire da una semplice descrizione testuale. In MdExplorer, puoi inserire diagrammi PlantUML direttamente nei file markdown usando blocchi di codice fenced. I diagrammi vengono renderizzati automaticamente nell'anteprima del documento.

What is PlantUML?

PlantUML is a language for creating UML diagrams (and more) from simple text descriptions. In MdExplorer, you can embed PlantUML diagrams directly in markdown files using fenced code blocks. Diagrams are automatically rendered in the document preview.

Sintassi nel Markdown

Per inserire un diagramma PlantUML, usa un blocco codice fenced con linguaggio plantuml:

Markdown ```plantuml @startuml Alice -> Bob: Richiesta login Bob -> Database: Verifica credenziali Database --> Bob: OK Bob --> Alice: Token JWT @enduml ```

Markdown Syntax

To insert a PlantUML diagram, use a fenced code block with language plantuml:

Markdown ```plantuml @startuml Alice -> Bob: Login request Bob -> Database: Verify credentials Database --> Bob: OK Bob --> Alice: JWT Token @enduml ```

Tipi di Diagramma Supportati

🔁

Sequence Diagram

Interazioni tra componenti nel tempo. Ideale per documentare flussi API e comunicazioni tra servizi.

🏗

Class Diagram

Struttura delle classi e relazioni. Utile per documentare il modello dati e le entità.

🧩

Component Diagram

Architettura del sistema ad alto livello. Mostra i moduli e le loro dipendenze.

🗄

ER Diagram

Schema database con tabelle, colonne e relazioni. Generabile direttamente da Claude Code.

📊

Activity Diagram

Flussi di lavoro e processi decisionali. Utile per documentare workflow utente.

🔄

State Diagram

Stati e transizioni di un'entità. Ideale per oggetti con ciclo di vita complesso.

Supported Diagram Types

🔁

Sequence Diagram

Interactions between components over time. Ideal for documenting API flows and service-to-service communication.

🏗

Class Diagram

Class structure and relationships. Useful for documenting data models and entities.

🧩

Component Diagram

High-level system architecture. Shows modules and their dependencies.

🗄

ER Diagram

Database schema with tables, columns, and relationships. Can be generated directly from Claude Code.

📊

Activity Diagram

Workflows and decision-making processes. Useful for documenting user workflows.

🔄

State Diagram

States and transitions of an entity. Ideal for objects with complex lifecycles.

Galleria Diagrammi

Ecco 6 tipi di diagramma PlantUML con il codice sorgente a fianco del risultato renderizzato. Questi esempi sono tratti dal progetto Errantia, il case study di MdExplorer.

Diagram Gallery

Here are 6 PlantUML diagram types with source code alongside the rendered result. These examples are from the Errantia project, MdExplorer's case study.

Sequence Diagram

PlantUML Source @startuml actor User as U participant "Angular\nFrontend" as FE participant "Express\nAPI" as BE database "PostgreSQL" as DB U -> FE: Click Login FE -> BE: POST /api/auth/login BE -> DB: SELECT user WHERE email=? DB --> BE: User record BE -> BE: Verify password (bcrypt) BE --> FE: JWT Token FE --> U: Dashboard @enduml

Flusso di login: User → Angular → Express → PostgreSQL

Class Diagram

PlantUML Source @startuml class User { +id: UUID +email: String +name: String +role: UserRole -- +createObject() +getObjects() } class WanderingObject { +id: UUID +code: String +name: String +nfcTag: String -- +getSightings() +getLastPosition() } class Sighting { +id: UUID +latitude: Float +longitude: Float +message: Text +createdAt: DateTime } User "1" --> "*" WanderingObject : creates WanderingObject "1" --> "*" Sighting : has @enduml

Entità: User, WanderingObject, Sighting con relazioni

Component Diagram

PlantUML Source @startuml package "Frontend" { [Angular 17 SPA] [Leaflet Maps] [Auth Module] } package "Backend" { [Express API] [Auth Middleware] [Objects Service] [Sightings Service] } package "Database" { [PostgreSQL] [PostGIS] } [Angular 17 SPA] --> [Express API] : REST API [Auth Module] --> [Auth Middleware] : JWT [Objects Service] --> [PostgreSQL] [Sightings Service] --> [PostGIS] @enduml

Architettura: Frontend / Backend / Database

ER Diagram

PlantUML Source @startuml entity "users" { *id : UUID <<PK>> -- *email : VARCHAR(255) *password_hash : VARCHAR(255) *name : VARCHAR(100) *role : user_role } entity "objects" { *id : UUID <<PK>> -- *code : VARCHAR(20) <<UNIQUE>> *name : VARCHAR(200) *nfc_tag : VARCHAR(100) *user_id : UUID <<FK>> } entity "sightings" { *id : UUID <<PK>> -- *object_id : UUID <<FK>> *latitude : DECIMAL *longitude : DECIMAL *geom : GEOMETRY } users ||--o{ objects objects ||--o{ sightings @enduml

Schema DB: users, objects, sightings

Activity Diagram

PlantUML Source @startuml start :Scan NFC tag; :Read object code; if (Object exists?) then (yes) :Show object page; :Request GPS position; if (GPS available?) then (yes) :Create sighting with position; :Show success + map; else (no) :Manual position input; :Create sighting; endif else (no) :Show "Object not found"; endif stop @enduml

Flusso NFC scan → oggetto → sighting

State Diagram

PlantUML Source @startuml [*] --> Draft Draft --> Active : publish() Draft --> Deleted : delete() Active --> Active : addSighting() Active --> Paused : pause() Paused --> Active : resume() Active --> Archived : archive() Archived --> Active : reactivate() Archived --> [*] Draft : entry / validate fields Active : entry / enable NFC scan Active : do / track sightings Paused : entry / disable NFC Archived : entry / freeze data @enduml

Ciclo vita oggetto: Draft → Active → Archived

Anteprima Live

MdExplorer mostra l'anteprima dei diagrammi PlantUML in tempo reale nell'editor. Non serve installare PlantUML localmente: MdExplorer usa un server PlantUML per il rendering. I diagrammi si aggiornano automaticamente quando modifichi il codice. In modalità split-view, vedi il codice a sinistra e il diagramma renderizzato a destra.

Suggerimento: MdExplorer usa un server PlantUML configurabile nelle impostazioni. Di default usa il server pubblico, ma puoi configurare un server locale per progetti privati.

Live Preview

MdExplorer shows a live preview of PlantUML diagrams in the editor. No local PlantUML installation is needed: MdExplorer uses a PlantUML server for rendering. Diagrams update automatically when you edit the code. In split-view mode, you see the code on the left and the rendered diagram on the right.

Tip: MdExplorer uses a configurable PlantUML server. The default is the public server, but you can configure a local server for private projects.

Esempio Reale da Errantia

Nel progetto Errantia, i diagrammi PlantUML sono usati nell'analisi tecnica per documentare lo stack e le interazioni. Ecco il diagramma architetturale dal file ANALISI_TECNICA.md:

Real Example from Errantia

In the Errantia project, PlantUML diagrams are used in the technical analysis to document the stack and interactions. Here is the architectural diagram from the ANALISI_TECNICA.md file:

ANALISI_TECNICA.md @startuml package "Frontend" { [Angular 17 SPA] [Leaflet Maps] } package "Backend" { [Express API] [Auth Module] [Objects Module] [Sightings Module] } package "Database" { [PostgreSQL] [PostGIS] } [Angular 17 SPA] --> [Express API] : REST API [Express API] --> [Auth Module] [Express API] --> [Objects Module] [Express API] --> [Sightings Module] [Auth Module] --> [PostgreSQL] [Objects Module] --> [PostgreSQL] [Sightings Module] --> [PostGIS] @enduml

Architettura Errantia: Angular + Express + PostgreSQL/PostGIS

Prossimi Passi

Ora che conosci PlantUML in MdExplorer, esplora le altre funzionalità.

Export PDF/Word

Esporta i tuoi documenti con diagrammi in formati professionali per condividerli con stakeholder e colleghi.

Integrazione Git

Versiona i tuoi diagrammi insieme al codice sorgente e alle specifiche con Git integrato.

Case Study: Errantia

Scopri come PlantUML viene utilizzato in un progetto reale per documentare architettura e flussi.

Next Steps

Now that you know PlantUML in MdExplorer, explore the other features.

Export PDF/Word

Export your documents with diagrams to professional formats for sharing with stakeholders and colleagues.

Git Integration

Version your diagrams alongside source code and specifications with built-in Git.

Case Study: Errantia

Discover how PlantUML is used in a real project to document architecture and flows.