# Rendered Examples Gallery

All 132 examples rendered by merm.


## Basic

### Diamond

<img src="basic/diamond.svg" alt="Diamond" width="186">

### Fan In

<img src="basic/fan_in.svg" alt="Fan In" width="486">

### Fan Out

<img src="basic/fan_out.svg" alt="Fan Out" width="486">

### Linear Chain

<img src="basic/linear_chain.svg" alt="Linear Chain" width="86">

### Parallel Paths

<img src="basic/parallel_paths.svg" alt="Parallel Paths" width="186">

### Self Loop

<img src="basic/self_loop.svg" alt="Self Loop" width="86">

### Single Node

<img src="basic/single_node.svg" alt="Single Node" width="88">

### Two Nodes

<img src="basic/two_nodes.svg" alt="Two Nodes" width="86">


## Class

### All Relationships

<img src="class/all_relationships.svg" alt="All Relationships" width="600">

### Annotations

<img src="class/annotations.svg" alt="Annotations" width="518">

### Basic

<img src="class/basic.svg" alt="Basic" width="382">

### Cardinality

<img src="class/cardinality.svg" alt="Cardinality" width="334">

### Complex

<img src="class/complex.svg" alt="Complex" width="260">

### Inheritance

<img src="class/inheritance.svg" alt="Inheritance" width="560">

### Interface Realization

<img src="class/interface_realization.svg" alt="Interface Realization" width="326">

### Many Members

<img src="class/many_members.svg" alt="Many Members" width="300">

### Members

<img src="class/members.svg" alt="Members" width="308">

### Mermaid Readme

<img src="class/mermaid_readme.svg" alt="Mermaid Readme" width="600">

### Relationships

<img src="class/relationships.svg" alt="Relationships" width="600">


## Direction

### Bt

<img src="direction/bt.svg" alt="Bt" width="86">

### Lr

<img src="direction/lr.svg" alt="Lr" width="306">

### Rl

<img src="direction/rl.svg" alt="Rl" width="306">

### Tb

<img src="direction/tb.svg" alt="Tb" width="86">

### Td

<img src="direction/td.svg" alt="Td" width="86">


## Edges

### Arrow

<img src="edges/arrow.svg" alt="Arrow" width="86">

### Circle Endpoint

<img src="edges/circle_endpoint.svg" alt="Circle Endpoint" width="86">

### Cross Endpoint

<img src="edges/cross_endpoint.svg" alt="Cross Endpoint" width="86">

### Dotted

<img src="edges/dotted.svg" alt="Dotted" width="86">

### Invisible

<img src="edges/invisible.svg" alt="Invisible" width="86">

### Labeled Edges

<img src="edges/labeled_edges.svg" alt="Labeled Edges" width="186">

### Open Link

<img src="edges/open_link.svg" alt="Open Link" width="86">

### Thick

<img src="edges/thick.svg" alt="Thick" width="86">


## Er

### All Cardinalities

<img src="er/all_cardinalities.svg" alt="All Cardinalities" width="570">

### Attributes

<img src="er/attributes.svg" alt="Attributes" width="130">

### Basic

<img src="er/basic.svg" alt="Basic" width="94">

### Complex

<img src="er/complex.svg" alt="Complex" width="290">

### Dashed Lines

<img src="er/dashed_lines.svg" alt="Dashed Lines" width="352">


## Flowchart

### Api Request

<img src="flowchart/api_request.svg" alt="Api Request" width="387">

### Ci Pipeline

<img src="flowchart/ci_pipeline.svg" alt="Ci Pipeline" width="600">

### Coffee Machine

<img src="flowchart/coffee_machine.svg" alt="Coffee Machine" width="564">

### Debug Loop

<img src="flowchart/debug_loop.svg" alt="Debug Loop" width="297">

### Elt Bigquery

<img src="flowchart/elt_bigquery.svg" alt="Elt Bigquery" width="600">

### Emoji

<img src="flowchart/emoji.svg" alt="Emoji" width="320">

### Emoji Workflow

<img src="flowchart/emoji_workflow.svg" alt="Emoji Workflow" width="389">

### Etl Postgres

<img src="flowchart/etl_postgres.svg" alt="Etl Postgres" width="600">

### Etl Simple

<img src="flowchart/etl_simple.svg" alt="Etl Simple" width="600">

### Icons

<img src="flowchart/icons.svg" alt="Icons" width="366">

### Mermaid Readme

<img src="flowchart/mermaid_readme.svg" alt="Mermaid Readme" width="556">

### Registration

<img src="flowchart/registration.svg" alt="Registration" width="600">


## Gantt

### Basic

<img src="gantt/basic.svg" alt="Basic" width="600">

### Mermaid Readme

<img src="gantt/mermaid_readme.svg" alt="Mermaid Readme" width="600">

### Modifiers

<img src="gantt/modifiers.svg" alt="Modifiers" width="600">

### No Title

<img src="gantt/no_title.svg" alt="No Title" width="600">

### Single Section

<img src="gantt/single_section.svg" alt="Single Section" width="600">


## Gitgraph

### Basic

<img src="gitgraph/basic.svg" alt="Basic" width="360">

### Branching

<img src="gitgraph/branching.svg" alt="Branching" width="600">

### Cherry Pick

<img src="gitgraph/cherry_pick.svg" alt="Cherry Pick" width="520">

### Complex

<img src="gitgraph/complex.svg" alt="Complex" width="600">

### Mermaid Readme

<img src="gitgraph/mermaid_readme.svg" alt="Mermaid Readme" width="600">


## Github

### Api Request

<img src="github/api_request.svg" alt="Api Request" width="387">

### Ci Pipeline

<img src="github/ci_pipeline.svg" alt="Ci Pipeline" width="600">

### Coffee Machine

<img src="github/coffee_machine.svg" alt="Coffee Machine" width="564">

### Debug Loop

<img src="github/debug_loop.svg" alt="Debug Loop" width="297">

### Elt Bigquery

<img src="github/elt_bigquery.svg" alt="Elt Bigquery" width="600">

### Emoji Workflow

<img src="github/emoji_workflow.svg" alt="Emoji Workflow" width="389">

### Etl Postgres

<img src="github/etl_postgres.svg" alt="Etl Postgres" width="600">

### Etl Simple

<img src="github/etl_simple.svg" alt="Etl Simple" width="600">

### Flink Late Event

<img src="github/flink_late_event.svg" alt="Flink Late Event" width="600">

### Flink Late Upsert

<img src="github/flink_late_upsert.svg" alt="Flink Late Upsert" width="600">

### Rag Pipeline

<img src="github/rag_pipeline.svg" alt="Rag Pipeline" width="600">

### Registration

<img src="github/registration.svg" alt="Registration" width="600">

### Xmas Tree

<img src="github/xmas_tree.svg" alt="Xmas Tree" width="393">


## Mindmap

### Basic

<img src="mindmap/basic.svg" alt="Basic" width="600">

### Deep Tree

<img src="mindmap/deep_tree.svg" alt="Deep Tree" width="600">

### Mermaid Readme

<img src="mindmap/mermaid_readme.svg" alt="Mermaid Readme" width="600">

### Shapes

<img src="mindmap/shapes.svg" alt="Shapes" width="443">

### Single Root

<img src="mindmap/single_root.svg" alt="Single Root" width="200">


## Pie

### Basic

<img src="pie/basic.svg" alt="Basic" width="600">

### Many Slices

<img src="pie/many_slices.svg" alt="Many Slices" width="600">

### Mermaid Readme

<img src="pie/mermaid_readme.svg" alt="Mermaid Readme" width="600">

### No Title

<img src="pie/no_title.svg" alt="No Title" width="600">

### Show Data

<img src="pie/show_data.svg" alt="Show Data" width="600">

### Single Slice

<img src="pie/single_slice.svg" alt="Single Slice" width="600">


## Scale

### Large

<img src="scale/large.svg" alt="Large" width="186">

### Medium

<img src="scale/medium.svg" alt="Medium" width="386">

### Small

<img src="scale/small.svg" alt="Small" width="86">


## Sequence

### Activations

<img src="sequence/activations.svg" alt="Activations" width="480">

### Arrows

<img src="sequence/arrows.svg" alt="Arrows" width="385">

### Basic

<img src="sequence/basic.svg" alt="Basic" width="398">

### Complex

<img src="sequence/complex.svg" alt="Complex" width="600">

### Flink Late Event

<img src="sequence/flink_late_event.svg" alt="Flink Late Event" width="600">

### Flink Late Upsert

<img src="sequence/flink_late_upsert.svg" alt="Flink Late Upsert" width="600">

### Loops

<img src="sequence/loops.svg" alt="Loops" width="600">

### Mermaid Readme

<img src="sequence/mermaid_readme.svg" alt="Mermaid Readme" width="556">

### Notes

<img src="sequence/notes.svg" alt="Notes" width="330">


## Shapes

### Asymmetric

<img src="shapes/asymmetric.svg" alt="Asymmetric" width="160">

### Circle

<img src="shapes/circle.svg" alt="Circle" width="99">

### Cylinder

<img src="shapes/cylinder.svg" alt="Cylinder" width="120">

### Diamond

<img src="shapes/diamond.svg" alt="Diamond" width="179">

### Double Circle

<img src="shapes/double_circle.svg" alt="Double Circle" width="147">

### Hexagon

<img src="shapes/hexagon.svg" alt="Hexagon" width="182">

### Mixed Shapes

<img src="shapes/mixed_shapes.svg" alt="Mixed Shapes" width="182">

### Parallelogram

<img src="shapes/parallelogram.svg" alt="Parallelogram" width="192">

### Parallelogram Alt

<img src="shapes/parallelogram_alt.svg" alt="Parallelogram Alt" width="218">

### Rect

<img src="shapes/rect.svg" alt="Rect" width="155">

### Rounded

<img src="shapes/rounded.svg" alt="Rounded" width="115">

### Stadium

<img src="shapes/stadium.svg" alt="Stadium" width="131">

### Subroutine

<img src="shapes/subroutine.svg" alt="Subroutine" width="136">

### Trapezoid

<img src="shapes/trapezoid.svg" alt="Trapezoid" width="151">

### Trapezoid Alt

<img src="shapes/trapezoid_alt.svg" alt="Trapezoid Alt" width="177">


## State

### Basic

<img src="state/basic.svg" alt="Basic" width="121">

### Choice

<img src="state/choice.svg" alt="Choice" width="240">

### Complex

<img src="state/complex.svg" alt="Complex" width="294">

### Fork Join

<img src="state/fork_join.svg" alt="Fork Join" width="404">

### Mermaid Readme

<img src="state/mermaid_readme.svg" alt="Mermaid Readme" width="196">

### Nested

<img src="state/nested.svg" alt="Nested" width="280">


## Styling

### Classdef Multiple

<img src="styling/classdef_multiple.svg" alt="Classdef Multiple" width="100">

### Classdef Single

<img src="styling/classdef_single.svg" alt="Classdef Single" width="88">

### Default Class

<img src="styling/default_class.svg" alt="Default Class" width="86">

### Inline Style

<img src="styling/inline_style.svg" alt="Inline Style" width="86">

### Mixed Styled Unstyled

<img src="styling/mixed_styled_unstyled.svg" alt="Mixed Styled Unstyled" width="253">


## Subgraphs

### Cross Boundary Edges

<img src="subgraphs/cross_boundary_edges.svg" alt="Cross Boundary Edges" width="226">

### Nested Subgraphs

<img src="subgraphs/nested_subgraphs.svg" alt="Nested Subgraphs" width="166">

### Sibling Subgraphs

<img src="subgraphs/sibling_subgraphs.svg" alt="Sibling Subgraphs" width="126">

### Single Subgraph

<img src="subgraphs/single_subgraph.svg" alt="Single Subgraph" width="126">

### Subgraph Direction

<img src="subgraphs/subgraph_direction.svg" alt="Subgraph Direction" width="290">

### Subgraph With Title

<img src="subgraphs/subgraph_with_title.svg" alt="Subgraph With Title" width="263">


## Text

### Long Text

<img src="text/long_text.svg" alt="Long Text" width="229">

### Multiline

<img src="text/multiline.svg" alt="Multiline" width="145">

### Quoted Labels

<img src="text/quoted_labels.svg" alt="Quoted Labels" width="225">

### Short Text

<img src="text/short_text.svg" alt="Short Text" width="86">

### Special Chars

<img src="text/special_chars.svg" alt="Special Chars" width="212">
