Obsidian Diagrams

Mermaid Diagrams

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

Will render as

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

SVG

<svg width="300" height="300" style="background: white">
    <line x1="0" x2="300" y1="100" y2="100" style="stroke: red" aria-label="attack line" />
    <circle cx="50" cy="20" r="10" aria-label="OH" />
    <circle cx="150" cy="20" r="10" aria-label="MB" />
    <circle cx="250" cy="20" r="10" aria-label="S" />
    <circle cx="50" cy="175" r="10" aria-label="OH" />
    <circle cx="150" cy="275" r="10" aria-label="MB" />
    <circle cx="250" cy="175" r="10" aria-label="O" />
</svg>

Will render as