Use Mermaid for speed
Flowcharts, sequences, ER diagrams, timelines, Gantt charts, and quick process visuals.
Diagram types
Supported Mermaid and PlantUML diagram types
Learn which diagram type to use for flows, sequences, architecture, databases, timelines, states, requirements, and technical documentation.
Choose the right diagram before you export
Presel supports text-based diagrams that work well with markdown and AI workflows. Mermaid is ideal for fast markdown-native diagrams. PlantUML is ideal for formal UML, architecture diagrams, and detailed software design. Each page below explains the diagram type, common use cases, syntax, and export workflow.
Use PlantUML for precision
UML, C4, deployment diagrams, component models, sequence flows, and architecture specs.
Export with context
Embed diagrams inside Word documents or export visuals for slides, tickets, and wikis.
Mermaid diagram types
Mermaid is useful for lightweight diagrams in markdown, AI-generated documentation, GitHub-style docs, and quick visual explanations.
Mermaid
Mermaid flowchart: usage and export guide
Understand a Mermaid flowchart, where it fits in documentation, and how to create, preview, and export it with Presel.
MermaidMermaid sequence diagram: usage and export guide
Understand a Mermaid sequence diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
MermaidMermaid class diagram: usage and export guide
Understand a Mermaid class diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
MermaidMermaid ER diagram: usage and export guide
Understand a Mermaid ER diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
MermaidMermaid Gantt chart: usage and export guide
Understand a Mermaid Gantt chart, where it fits in documentation, and how to create, preview, and export it with Presel.
MermaidMermaid state diagram: usage and export guide
Understand a Mermaid state diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
MermaidMermaid pie chart: usage and export guide
Understand a Mermaid pie chart, where it fits in documentation, and how to create, preview, and export it with Presel.
MermaidMermaid journey map: usage and export guide
Understand a Mermaid journey map, where it fits in documentation, and how to create, preview, and export it with Presel.
MermaidMermaid git graph: usage and export guide
Understand a Mermaid git graph, where it fits in documentation, and how to create, preview, and export it with Presel.
MermaidMermaid mindmap: usage and export guide
Understand a Mermaid mindmap, where it fits in documentation, and how to create, preview, and export it with Presel.
MermaidMermaid timeline: usage and export guide
Understand a Mermaid timeline, where it fits in documentation, and how to create, preview, and export it with Presel.
MermaidMermaid quadrant chart: usage and export guide
Understand a Mermaid quadrant chart, where it fits in documentation, and how to create, preview, and export it with Presel.
MermaidMermaid requirement diagram: usage and export guide
Understand a Mermaid requirement diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
MermaidMermaid C4 context diagram: usage and export guide
Understand a Mermaid C4 context diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
MermaidMermaid C4 container diagram: usage and export guide
Understand a Mermaid C4 container diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
MermaidMermaid Sankey diagram: usage and export guide
Understand a Mermaid Sankey diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
MermaidMermaid XY chart: usage and export guide
Understand a Mermaid XY chart, where it fits in documentation, and how to create, preview, and export it with Presel.
MermaidMermaid block diagram: usage and export guide
Understand a Mermaid block diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
MermaidMermaid packet diagram: usage and export guide
Understand a Mermaid packet diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
MermaidMermaid kanban board: usage and export guide
Understand a Mermaid kanban board, where it fits in documentation, and how to create, preview, and export it with Presel.
MermaidMermaid architecture diagram: usage and export guide
Understand a Mermaid architecture diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
MermaidMermaid user flow diagram: usage and export guide
Understand a Mermaid user flow diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
MermaidMermaid API flow diagram: usage and export guide
Understand a Mermaid API flow diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
MermaidMermaid data flow diagram: usage and export guide
Understand a Mermaid data flow diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
MermaidMermaid decision tree: usage and export guide
Understand a Mermaid decision tree, where it fits in documentation, and how to create, preview, and export it with Presel.
MermaidMermaid release timeline: usage and export guide
Understand a Mermaid release timeline, where it fits in documentation, and how to create, preview, and export it with Presel.
MermaidMermaid product roadmap: usage and export guide
Understand a Mermaid product roadmap, where it fits in documentation, and how to create, preview, and export it with Presel.
MermaidMermaid incident response flow: usage and export guide
Understand a Mermaid incident response flow, where it fits in documentation, and how to create, preview, and export it with Presel.
MermaidMermaid onboarding flow: usage and export guide
Understand a Mermaid onboarding flow, where it fits in documentation, and how to create, preview, and export it with Presel.
MermaidMermaid approval workflow: usage and export guide
Understand a Mermaid approval workflow, where it fits in documentation, and how to create, preview, and export it with Presel.
PlantUML diagram types
PlantUML is useful for formal UML, C4 architecture, system design, deployment views, and technical documentation that needs precise notation.
PlantUML
PlantUML sequence diagram: usage and export guide
Understand a PlantUML sequence diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
PlantUMLPlantUML class diagram: usage and export guide
Understand a PlantUML class diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
PlantUMLPlantUML component diagram: usage and export guide
Understand a PlantUML component diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
PlantUMLPlantUML use case diagram: usage and export guide
Understand a PlantUML use case diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
PlantUMLPlantUML activity diagram: usage and export guide
Understand a PlantUML activity diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
PlantUMLPlantUML state diagram: usage and export guide
Understand a PlantUML state diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
PlantUMLPlantUML deployment diagram: usage and export guide
Understand a PlantUML deployment diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
PlantUMLPlantUML object diagram: usage and export guide
Understand a PlantUML object diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
PlantUMLPlantUML package diagram: usage and export guide
Understand a PlantUML package diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
PlantUMLPlantUML timing diagram: usage and export guide
Understand a PlantUML timing diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
PlantUMLPlantUML network diagram: usage and export guide
Understand a PlantUML network diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
PlantUMLPlantUML wireframe: usage and export guide
Understand a PlantUML wireframe, where it fits in documentation, and how to create, preview, and export it with Presel.
PlantUMLPlantUML Gantt chart: usage and export guide
Understand a PlantUML Gantt chart, where it fits in documentation, and how to create, preview, and export it with Presel.
PlantUMLPlantUML WBS diagram: usage and export guide
Understand a PlantUML WBS diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
PlantUMLPlantUML mindmap: usage and export guide
Understand a PlantUML mindmap, where it fits in documentation, and how to create, preview, and export it with Presel.
PlantUMLPlantUML JSON diagram: usage and export guide
Understand a PlantUML JSON diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
PlantUMLPlantUML YAML diagram: usage and export guide
Understand a PlantUML YAML diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
PlantUMLPlantUML regex diagram: usage and export guide
Understand a PlantUML regex diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
PlantUMLPlantUML C4 context diagram: usage and export guide
Understand a PlantUML C4 context diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
PlantUMLPlantUML C4 container diagram: usage and export guide
Understand a PlantUML C4 container diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
PlantUMLPlantUML C4 component diagram: usage and export guide
Understand a PlantUML C4 component diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
PlantUMLPlantUML architecture diagram: usage and export guide
Understand a PlantUML architecture diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
PlantUMLPlantUML database schema diagram: usage and export guide
Understand a PlantUML database schema diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
PlantUMLPlantUML API sequence diagram: usage and export guide
Understand a PlantUML API sequence diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
PlantUMLPlantUML authentication flow diagram: usage and export guide
Understand a PlantUML authentication flow diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
PlantUMLPlantUML microservices diagram: usage and export guide
Understand a PlantUML microservices diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
PlantUMLPlantUML event driven diagram: usage and export guide
Understand a PlantUML event driven diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
PlantUMLPlantUML DevOps pipeline diagram: usage and export guide
Understand a PlantUML DevOps pipeline diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
PlantUMLPlantUML cloud deployment diagram: usage and export guide
Understand a PlantUML cloud deployment diagram, where it fits in documentation, and how to create, preview, and export it with Presel.
PlantUMLPlantUML security architecture diagram: usage and export guide
Understand a PlantUML security architecture diagram, where it fits in documentation, and how to create, preview, and export it with Presel.