feat: support Mermaid state diagram directions

pkg/mermaid/README.md

@@ -98,5 +98,5 @@ Mermaid blocks remain syntax-highlighted code blocks.
 | Concurrent states | ❌ | ❌ | |
 | State notes | ❌ | ❌ | |
 | Choice, fork, and join pseudostates | ❌ | ❌ | |
-| State direction declarations | ❌ | ❌ | |
+| State direction declarations | ✅ | ✅ | `TD`, `TB`, `BT`, `LR`, and `RL` are supported |
 | Styling and classes | ❌ | ❌ | |

pkg/mermaid/parser_state.go

@@ -6,6 +6,13 @@ func parseState(doc *Document, statements []string) {
 	pseudoState := 0
 	for _, statement := range statements {
 		cursor := mermaidCursor{input: statement}
+		if cursor.consumeKeyword("direction") {
+			direction, ok := cursor.readIdentifier()
+			if ok && cursor.eof() && validMermaidDirection(direction) {
+				doc.Direction = strings.ToUpper(direction)
+			}
+			continue
+		}
 		if cursor.consumeKeyword("state") {
 			label, ok := cursor.readQuoted()
 			if !ok || !cursor.consumeKeyword("as") {
@@ -51,6 +58,15 @@ func parseState(doc *Document, statements []string) {
 	}
 }
 
+func validMermaidDirection(direction string) bool {
+	switch strings.ToUpper(direction) {
+	case "TD", "TB", "BT", "LR", "RL":
+		return true
+	default:
+		return false
+	}
+}
+
 func mermaidPseudoStateID(kind string, index int) string {
 	return "__" + kind + "_" + strings.Repeat("_", index)
 }

pkg/mermaid/parser_test.go

@@ -141,6 +141,29 @@ Working --> [*]: complete`)
 	assert.Equal(t, "End", doc.Nodes[doc.Edges[2].To].Label)
 }
 
+func TestParseStateDiagramDirection(t *testing.T) {
+	t.Parallel()
+
+	tests := []struct {
+		direction string
+		want      string
+	}{
+		{direction: "LR", want: "LR"},
+		{direction: "rl", want: "RL"},
+		{direction: "TB", want: "TB"},
+		{direction: "BT", want: "BT"},
+	}
+	for _, tt := range tests {
+		t.Run(tt.direction, func(t *testing.T) {
+			t.Parallel()
+
+			doc, err := Parse("stateDiagram-v2\ndirection " + tt.direction + "\n[*] --> Idle\nIdle --> [*]")
+			require.NoError(t, err)
+			assert.Equal(t, tt.want, doc.Direction)
+		})
+	}
+}
+
 func TestSplitMermaidStatementsHonorsQuotedAndDelimitedSemicolons(t *testing.T) {
 	t.Parallel()
 

pkg/tui/components/mermaid/render.go

@@ -26,7 +26,7 @@ func Render(source string, width int) (string, bool) {
 	case mermaidparser.DiagramSequence:
 		return drawMermaidSequence(document.Edges, document.SequenceEvents, document.Participants, labels, width), true
 	case mermaidparser.DiagramState:
-		return drawMermaidGraph(document.Edges, document.NodeOrder, labels, width), true
+		return drawMermaidFlowchart(document.Edges, document.NodeOrder, labels, document.Direction, width), true
 	default:
 		return "", false
 	}

pkg/tui/components/mermaid/render_test.go

@@ -243,6 +243,56 @@ Note over A,B: Waiting for work
 Note right of B: After`,
 			width: 60,
 		},
+		{
+			name: "state top down direction",
+			source: `stateDiagram-v2
+state "Waiting for work" as Waiting
+direction TD
+[*] --> Waiting
+Waiting --> Running: start
+Running --> [*]: finish`,
+			width: 80,
+		},
+		{
+			name: "state top bottom direction",
+			source: `stateDiagram-v2
+state "Waiting for work" as Waiting
+direction TB
+[*] --> Waiting
+Waiting --> Running: start
+Running --> [*]: finish`,
+			width: 80,
+		},
+		{
+			name: "state bottom top direction",
+			source: `stateDiagram-v2
+state "Waiting for work" as Waiting
+direction BT
+[*] --> Waiting
+Waiting --> Running: start
+Running --> [*]: finish`,
+			width: 80,
+		},
+		{
+			name: "state left right direction",
+			source: `stateDiagram-v2
+state "Waiting for work" as Waiting
+direction LR
+[*] --> Waiting
+Waiting --> Running: start
+Running --> [*]: finish`,
+			width: 80,
+		},
+		{
+			name: "state right left direction",
+			source: `stateDiagram-v2
+state "Waiting for work" as Waiting
+direction RL
+[*] --> Waiting
+Waiting --> Running: start
+Running --> [*]: finish`,
+			width: 80,
+		},
 		{
 			name: "state lifecycle and cycle",
 			source: `stateDiagram-v2

pkg/tui/components/mermaid/testdata/state bottom top direction.golden

@@ -0,0 +1,18 @@
+                                    ╭──────╮
+                                    │ End  │
+                                    ╰──────╯
+                                        ▲
+                                        │ finish
+                                   ╭────┴────╮
+                                   │ Running │
+                                   ╰─────────╯
+                                        ▲
+                                        │ start
+                              ╭─────────┴────────╮
+                              │ Waiting for work │
+                              ╰──────────────────╯
+                                        ▲
+                                        │
+                                    ╭───┴───╮
+                                    │ Start │
+                                    ╰───────╯

pkg/tui/components/mermaid/testdata/state left right direction.golden

@@ -0,0 +1,3 @@
+   ╭───────╮     ╭──────────────────╮          ╭─────────╮           ╭──────╮
+   │ Start ├────▶│ Waiting for work ├──start──▶│ Running ├──finish──▶│ End  │
+   ╰───────╯     ╰──────────────────╯          ╰─────────╯           ╰──────╯

pkg/tui/components/mermaid/testdata/state right left direction.golden

@@ -0,0 +1,3 @@
+   ╭──────╮           ╭─────────╮          ╭──────────────────╮     ╭───────╮
+   │  End │◀──finish──┤ Running │◀──start──┤ Waiting for work │◀────┤ Start │
+   ╰──────╯           ╰─────────╯          ╰──────────────────╯     ╰───────╯

pkg/tui/components/mermaid/testdata/state top bottom direction.golden

@@ -0,0 +1,18 @@
+                                    ╭───────╮
+                                    │ Start │
+                                    ╰───┬───╯
+                                        │
+                                        ▼
+                              ╭──────────────────╮
+                              │ Waiting for work │
+                              ╰─────────┬────────╯
+                                        │ start
+                                        ▼
+                                   ╭─────────╮
+                                   │ Running │
+                                   ╰────┬────╯
+                                        │ finish
+                                        ▼
+                                    ╭──────╮
+                                    │ End  │
+                                    ╰──────╯

pkg/tui/components/mermaid/testdata/state top down direction.golden

@@ -0,0 +1,18 @@
+                                    ╭───────╮
+                                    │ Start │
+                                    ╰───┬───╯
+                                        │
+                                        ▼
+                              ╭──────────────────╮
+                              │ Waiting for work │
+                              ╰─────────┬────────╯
+                                        │ start
+                                        ▼
+                                   ╭─────────╮
+                                   │ Running │
+                                   ╰────┬────╯
+                                        │ finish
+                                        ▼
+                                    ╭──────╮
+                                    │ End  │
+                                    ╰──────╯