### Render HTML Previews

Source: https://flow.prooph-board.com/docs/elements

Use the html language identifier in a fenced code block to render live HTML snippets within element descriptions or details.

```html
```html
<form style="font-family: sans-serif; padding: 20px; max-width: 300px;">
  <h2>Login</h2>
  <input type="text" placeholder="Username"
    style="display:block; width:100%; margin-bottom:8px; padding:6px;" />
  <input type="password" placeholder="Password"
    style="display:block; width:100%; margin-bottom:12px; padding:6px;" />
  <button style="padding:8px 16px; background:#3b82f6;
    color:white; border:none; border-radius:4px;">Sign In</button>
</form>
```
```

--------------------------------

### Create Clickable Mermaid Nodes

Source: https://flow.prooph-board.com/docs/elements

Use the click directive within a Mermaid diagram to link nodes to specific elements on the canvas using deep link URLs.

```mermaid
```mermaid
flowchart TB
  subgraph MyFeature["My Feature"]
    A["Step 1"]
    B["Step 2"]
    click A "https://your-domain/link/{workspaceId}/{chapterId}/element/{elementId}"
  end
```
```

--------------------------------

### Deep Link URL Structure

Source: https://flow.prooph-board.com/docs/collaboration

The format for generating direct links to specific elements or slices within a workspace.

```text
https://your-domain.com/link/{workspaceId}/{chapterId}/{type}/{id}
```

--------------------------------

### Embed a Mermaid Flowchart

Source: https://flow.prooph-board.com/docs/elements

Use the mermaid language identifier in a fenced code block to render interactive diagrams on the canvas.

```mermaid
```mermaid
flowchart LR
  A[User Action] --> B[Command]
  B --> C[Event]
  C --> D[Read Model]
```
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.