---
name: visualizing-workflows
description: Translates text-based discussions of workflows, system architectures, and processes into structured diagram code. Triggers when the user brainstorms a multi-step process or explicitly asks to visualize a concept.
---

# Visualizing Workflows

## Objective
Automatically translate text-based discussions of complex processes, systems, or workflows into structured diagram code (Mermaid.js, or alternatively e.g. PlantUML if requested) so the user can easily render a visual map of the conversation.

## Reference Material
- **Mermaid Syntax Reference:** `https://mermaid.js.org/intro/syntax-reference.html`
- Use this URL if you need to verify syntax and select the correct diagram type (e.g., flowchart, sequenceDiagram, stateDiagram).

## Instructions
1. **Analyze the Context:** Review the workflow, system, or process currently being discussed. Identify the core components, actors, decision points, and the directional flow of actions/data.
2. **Select the Format:** Default to **Mermaid.js** syntax because of its wide support. Rely on your internal knowledge or the Reference Material above to ensure correct syntax.
3. **Draft the Code:** Write clean, strictly compliant syntax. Use logical groupings (subgraphs), clear labels, and appropriate node shapes to make the diagram intuitive.
4. **Format the Output:**
   - Provide a very brief 1-2 sentence summary of what the diagram represents.
   - Output the exact syntax inside a standard markdown code block.
   - Include a quick, actionable tip on how to render it.

## Constraints
- **Stick to the Scope:** Only map out the steps, components, or logic explicitly discussed or logically implied by the current conversation. Do not invent new features or steps that haven't been mentioned.
- **Valid Syntax Only:** Ensure the code does not contain syntax errors that would break standard renderers. 
- **Do not over-explain:** Let the visualization do the talking. Keep the surrounding text brief and focus on delivering the code block.

## Example Output

Here is a visual map of the simple login process we just outlined:

```mermaid
graph TD
    A[User enters credentials] --> B{Are credentials valid?}
    B -- Yes --> C[Generate Auth Token]
    B -- No --> D[Show Error Message]
    C --> E[Redirect to Dashboard]
```

*Tip: Copy this code and paste it into [mermaid.live](https://mermaid.live) to view your diagram.*