return xterm compatible colors, use runewidth

Author: AlexanderGrooff

cmd/draw.go

@@ -5,6 +5,7 @@ import (
 	"strings"
 
 	"github.com/gookit/color"
+	"github.com/mattn/go-runewidth"
 	log "github.com/sirupsen/logrus"
 )
 
@@ -48,10 +49,17 @@ func (g *graph) drawEdge(e *edge) (*drawing, *drawing, *drawing, *drawing, *draw
 
 func (d *drawing) drawText(start drawingCoord, text string) {
 	// Increase dimensions if necessary.
-	d.increaseSize(start.x+len(text), start.y)
-	log.Debug("Drawing '", text, "' from ", start, " to ", drawingCoord{x: start.x + len(text), y: start.y})
-	for x := 0; x < len(text); x++ {
-		(*d)[x+start.x][start.y] = string(text[x])
+	textWidth := runewidth.StringWidth(text)
+	d.increaseSize(start.x+textWidth, start.y)
+	log.Debug("Drawing '", text, "' from ", start, " to ", drawingCoord{x: start.x + textWidth, y: start.y})
+	pos := 0
+	for _, char := range text {
+		(*d)[start.x+pos][start.y] = string(char)
+		charWidth := runewidth.RuneWidth(char)
+		for i := 1; i < charWidth; i++ {
+			(*d)[start.x+pos+i][start.y] = ""
+		}
+		pos += charWidth
 	}
 }
 
@@ -228,10 +236,17 @@ func drawBox(n *node, g graph) *drawing {
 		boxDrawing[to.x][to.y] = "+"     // Bottom right corner
 	}
 	// Draw text
+	nameWidth := runewidth.StringWidth(n.name)
 	textY := from.y + h/2
-	textX := from.x + w/2 - CeilDiv(len(n.name), 2) + 1
-	for x := 0; x < len(n.name); x++ {
-		boxDrawing[textX+x][textY] = wrapTextInColor(string(n.name[x]), n.styleClass.styles["color"], g.styleType)
+	textX := from.x + w/2 - CeilDiv(nameWidth, 2) + 1
+	pos := 0
+	for _, char := range n.name {
+		boxDrawing[textX+pos][textY] = wrapTextInColor(string(char), n.styleClass.styles["color"], g.styleType)
+		charWidth := runewidth.RuneWidth(char)
+		for i := 1; i < charWidth; i++ {
+			boxDrawing[textX+pos+i][textY] = ""
+		}
+		pos += charWidth
 	}
 
 	return &boxDrawing
@@ -317,15 +332,24 @@ func drawSubgraphLabel(sg *subgraph, g graph) (*drawing, drawingCoord) {
 	labelDrawing := *(mkDrawing(width, height))
 
 	// Draw label centered at top
+	nameWidth := runewidth.StringWidth(sg.name)
 	labelY := from.y + 1
-	labelX := from.x + width/2 - len(sg.name)/2
+	labelX := from.x + width/2 - nameWidth/2
 	if labelX < from.x+1 {
 		labelX = from.x + 1
 	}
-	for i, char := range sg.name {
-		if labelX+i < to.x {
-			labelDrawing[labelX+i][labelY] = string(char)
+	pos := 0
+	for _, char := range sg.name {
+		if labelX+pos < to.x {
+			labelDrawing[labelX+pos][labelY] = string(char)
+			charWidth := runewidth.RuneWidth(char)
+			for i := 1; i < charWidth; i++ {
+				if labelX+pos+i < to.x {
+					labelDrawing[labelX+pos+i][labelY] = ""
+				}
+			}
 		}
+		pos += runewidth.RuneWidth(char)
 	}
 
 	// Return label drawing and its offset position
@@ -337,12 +361,20 @@ func wrapTextInColor(text, c, styleType string) string {
 	if c == "" {
 		return text
 	}
-	if styleType == "html" {
+	switch styleType {
+	case "html":
 		return fmt.Sprintf("<span style='color: %s'>%s</span>", c, text)
-	} else if styleType == "cli" {
+	case "xterm":
+		var r, g, b int
+		if _, err := fmt.Sscanf(c, "#%02x%02x%02x", &r, &g, &b); err != nil {
+			log.Warnf("Invalid xterm color %s", c)
+			return text
+		}
+		return fmt.Sprintf("\x1b[38;2;%d;%d;%dm%s\x1b[39m", r, g, b, text)
+	case "cli":
 		cliColor := color.HEX(c)
 		return cliColor.Sprint(text)
-	} else {
+	default:
 		log.Warnf("Unknown style type %s", styleType)
 		return text
 	}

cmd/graph_test.go

@@ -113,4 +113,38 @@ A --> B`
 	}
 }
 
+func TestWrapTextInColorXterm(t *testing.T) {
+	got := wrapTextInColor("X", "#ff00ff", "xterm")
+	want := "\x1b[38;2;255;0;255mX\x1b[39m"
+	if got != want {
+		t.Fatalf("unexpected xterm color output: got %q want %q", got, want)
+	}
+}
+
+func TestUnicodeNodeWidth(t *testing.T) {
+	mermaidInput := `graph TD
+감각 --> 사고
+사고 --> 행동`
+
+	config := &diagram.Config{
+		UseAscii:         false,
+		BoxBorderPadding: 1,
+		PaddingBetweenX:  5,
+		PaddingBetweenY:  5,
+		GraphDirection:   "TD",
+		StyleType:        "cli",
+	}
+
+	output, err := RenderDiagram(mermaidInput, config)
+	if err != nil {
+		t.Fatalf("Failed to render unicode graph: %v", err)
+	}
+
+	for _, label := range []string{"감각", "사고", "행동"} {
+		if !strings.Contains(output, label) {
+			t.Fatalf("expected output to contain %q, got:\n%s", label, output)
+		}
+	}
+}
+
 // Sequence diagram tests moved to sequence_test.go

cmd/mapping_node.go

@@ -1,6 +1,7 @@
 package cmd
 
 import (
+	"github.com/mattn/go-runewidth"
 	log "github.com/sirupsen/logrus"
 )
 
@@ -36,7 +37,7 @@ func (g *graph) setColumnWidth(n *node) {
 	// - 2x padding
 	// - 2x margin
 	col1 := 1
-	col2 := 2*boxBorderPadding + len(n.name)
+	col2 := 2*boxBorderPadding + runewidth.StringWidth(n.name)
 	col3 := 1
 	colsToBePlaced := []int{col1, col2, col3}
 	rowsToBePlaced := []int{1, 1 + 2*boxBorderPadding, 1} // Border, padding + line, border

pkg/diagram/config.go

@@ -28,8 +28,7 @@ type Config struct {
 	// GraphDirection is the direction of graph layout ("LR" or "TD")
 	GraphDirection string
 
-	// StyleType determines output format for graph diagrams ("cli" or "html")
-	// This controls whether graphs use colored output (html) or plain text (cli)
+	// StyleType determines output format for graph diagrams ("cli", "html", or "xterm")
 	StyleType string
 
 	// --- Sequence diagram-specific configuration ---
@@ -122,7 +121,7 @@ func NewWebConfig(useAscii bool, boxBorderPadding, paddingX, paddingY int) (*Con
 		PaddingBetweenX:            paddingX,
 		PaddingBetweenY:            paddingY,
 		GraphDirection:             "LR",
-		StyleType:                  "html",
+		StyleType:                  "xterm",
 		SequenceParticipantSpacing: defaults.SequenceParticipantSpacing,
 		SequenceMessageSpacing:     defaults.SequenceMessageSpacing,
 		SequenceSelfMessageWidth:   defaults.SequenceSelfMessageWidth,
@@ -136,7 +135,7 @@ func NewWebConfig(useAscii bool, boxBorderPadding, paddingX, paddingY int) (*Con
 }
 
 // NewTestConfig creates a Config for testing with sensible defaults.
-// The styleType parameter determines output format ("cli" or "html").
+// The styleType parameter determines output format ("cli", "html", or "xterm").
 func NewTestConfig(useAscii bool, styleType string) *Config {
 	config := DefaultConfig()
 	config.UseAscii = useAscii
@@ -160,8 +159,8 @@ func (c *Config) Validate() error {
 	if c.GraphDirection != "LR" && c.GraphDirection != "TD" {
 		return &ConfigError{Field: "GraphDirection", Value: c.GraphDirection, Message: "must be \"LR\" or \"TD\""}
 	}
-	if c.StyleType != "cli" && c.StyleType != "html" {
-		return &ConfigError{Field: "StyleType", Value: c.StyleType, Message: "must be \"cli\" or \"html\""}
+	if c.StyleType != "cli" && c.StyleType != "html" && c.StyleType != "xterm" {
+		return &ConfigError{Field: "StyleType", Value: c.StyleType, Message: "must be \"cli\", \"html\", or \"xterm\""}
 	}
 
 	// Validate sequence diagram configuration

pkg/diagram/testutil/testutil.go

@@ -35,7 +35,9 @@ func ReadTestCase(filePath string) (*TestCase, error) {
 	if err != nil {
 		return nil, err
 	}
-	defer file.Close()
+	defer func() {
+		_ = file.Close()
+	}()
 
 	scanner := bufio.NewScanner(file)
 	var mermaid, expected strings.Builder

static/script.js

@@ -37,64 +37,8 @@ let term;
 let fitAddon;
 let lastRenderedContent = '';
 
-function escapeAnsi(text) {
-    return text.replace(/\u001b/g, '');
-}
-
-function rgbToAnsi(color) {
-    const match = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i);
-    if (!match) return '';
-    return `\u001b[38;2;${match[1]};${match[2]};${match[3]}m`;
-}
-
-function htmlToTerminalContent(content) {
-    if (!content.includes('<')) {
-        return {
-            ansi: content,
-            plainText: content,
-        };
-    }
-
-    const root = document.createElement('div');
-    root.innerHTML = content;
-    let ansi = '';
-    let plainText = '';
-
-    function walk(node, activeColor = '') {
-        if (node.nodeType === Node.TEXT_NODE) {
-            const text = node.textContent || '';
-            ansi += activeColor + text;
-            plainText += text;
-            return;
-        }
-
-        if (node.nodeType !== Node.ELEMENT_NODE) {
-            return;
-        }
-
-        const element = node;
-        const nextColor = element.style?.color ? rgbToAnsi(element.style.color) : activeColor;
-
-        for (const child of element.childNodes) {
-            walk(child, nextColor);
-        }
-
-        if (element.style?.color && nextColor) {
-            ansi += '\u001b[39m';
-            if (activeColor) {
-                ansi += activeColor;
-            }
-        }
-    }
-
-    for (const child of root.childNodes) {
-        walk(child);
-    }
-
-    return {
-        ansi,
-        plainText: escapeAnsi(plainText),
-    };
+function stripAnsi(text) {
+    return text.replace(/\u001b\[[0-9;]*m/g, '');
 }
 
 // Copy terminal content
@@ -123,11 +67,10 @@ function renderTerminal(content) {
     if (!term) return;
 
     const normalizedContent = content.replace(/\r\n/g, '\n');
-    const rendered = htmlToTerminalContent(normalizedContent);
-    lastRenderedContent = rendered.plainText;
+    lastRenderedContent = stripAnsi(normalizedContent);
     term.reset();
     fitTerminal();
-    term.write(rendered.ansi.replace(/\n/g, '\r\n'));
+    term.write(normalizedContent.replace(/\n/g, '\r\n'));
     term.scrollToTop();
 }