Flowchart generation skill

Reading narrative text for too long lets the brain slack off. A flowchart is the cheapest visual summary: one picture is worth a thousand words. Flowix is wired into the Markdown rendering layer, so an Agent can drop a Mermaid code block straight in and have it render to a diagram in real time.

Prerequisite -- You've written a minimal-structure prompt, see Prompts.

1. Three diagram syntaxes

Syntax	Strengths	Weaknesses	Typical use
Mermaid	Flowchart / sequence / class / Gantt	Complex layout	90% of internal documentation scenarios
PlantUML	Sequence, component, state machines	Requires server-side rendering	Technical proposals / architecture diagrams
DOT (Graphviz)	Directed graphs, trees	Academic-looking output	Dependency graphs, directory trees

Default to Mermaid. The Flowix editor supports it natively -- Mermaid code blocks render directly, with no plugin needed.

2. A ready-to-use prompt

Save the following as Prompts/flowchart.md:

# Prompt: Generate a flowchart from body text

## Input
A paragraph of explanatory text:

"""

"""

## Output
**Output only** a Mermaid code block, with no preamble or explanation. If the text does not describe a flow, **rewrite it as a 3-5 step diagram** (`graph TD`); do not draw pie/line charts.

Requirements:
- Nodes ≤ 8; merge if too many
- Key decision nodes must use the diamond `{}`
- Edge labels ≤ 6 characters, placed in `-->|label|`
- Do not use diamonds when there is no binary "yes / no" edge
- Use `flowchart LR` (left-to-right) instead of TD, unless it is clearly a time sequence

Usage: place the cursor after the paragraph you want illustrated, Cmd/Ctrl + L -> select Agent -> type "draw a flowchart for the previous paragraph". The Agent reads the context and writes a Mermaid code block, which Flowix renders automatically.

3. Three typical Mermaid diagrams

Flowchart (horizontal decision tree)

flowchart LR
  A[User submits form] --> B{Validation passes?}
  B -- yes --> C[Write to database]
  B -- no --> D[Return error]
  C --> E[Return 200]

Flowix renders this code block automatically.

Sequence diagram

\`\`\`mermaid
sequenceDiagram
  participant U as User
  participant F as Flowix
  participant C as Claude
  U->>F: Cmd+L invoke
  F->>F: Read current document
  F->>C: Inject context
  C-->>F: Stream output
  F->>U: Write back at cursor
\`\`\`

Gantt chart (project schedule)

gantt
  title Flowix 0.10 schedule
  dateFormat  YYYY-MM-DD
  section R&D
  Multi-device note sync       :a1, 2026-07-12, 10d
  Skill market           :a2, after a1, 12d
  section Product
  UI redesign             :b1, 2026-07-20, 8d

4. Review and iterate

The first draft will usually have missing information or wrong ordering. Typical follow-ups:

Issue	Follow-up
Nodes too crowded	"Merge A and B into one node"
Want to express parallelism	"Split X, Y into parallel branches using a subgraph"
Wrong order	"C should happen before D, adjust"
Too complex	"Restructure the whole diagram: inputs on the left, processing in the middle, outputs on the right"

After each follow-up, Flowix rewrites the code block and the visualization refreshes instantly.

5. Cross-document references

For larger projects, centralize all flowcharts in a Diagrams/ directory:

Notes/
  Diagrams/
    user-login-sequence.md
    order-state-machine.md
    deployment-flow.md

Each file is just one diagram plus a short caption. Reference them from other documents with [[user-login-sequence]] double-bracket links; Flowix renders them as diagrams automatically.

6. Rules of thumb

The point of a diagram is to reduce text, not to show off -- fewer nodes is better
Decision nodes (diamonds) should not exceed 3 -- if there are more, split into multiple sub-diagrams
Edge labels use verb + object: "submit -> review", not "operate"
Stick with the default colors -- thematic consistency beats colorful variety