Fix sequence diagram CJK/Unicode character rendering - #55
Open
ColtWindy wants to merge 3 commits into
Open
Conversation
Use a custom runewidth.Condition with EastAsianWidth=false to properly calculate display widths for both box drawing characters and CJK text. The issue: runewidth library treats box drawing characters (┌, ─, │) as East Asian Ambiguous, returning width=2, while they actually display as width=1 in most terminals. This caused misalignment when CJK characters (which correctly have width=2) were used in participant names. Before: │ 클라이언트 │ │ 서버 │ (10 spaces - too many) After: │ 클라이언트 │ │ 서버 │ (5 spaces - correct) The fix uses EastAsianWidth=false which: - Box drawing characters: width=1 (correct) - CJK characters: width=2 (correct) Also adds Korean language test case (korean_participants.txt). Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
The previous label rendering used rune array indexing which doesn't
account for display width differences between ASCII and CJK characters.
Problem: Label text was positioned using col++ (rune index), but the
line array used display width positioning for lifelines. This caused
misalignment when CJK characters (display width=2) were used in labels.
Solution: Rewrite label rendering to use display width-based positioning:
- Build the line character by character using display position
- Labels take priority over lifelines (overwrite them as intended)
- Use widthCondition.RuneWidth() to advance position correctly
Before:
│ 사용자 인증 토큰 검증 요청│ (label ends at wrong position)
After:
│ 사용자 인증 토큰 검증 요청 (proper display width positioning)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add test coverage for CJK/Unicode character rendering with a test case that combines English, Japanese, Korean, and Chinese characters. This verifies header alignment, label positioning, and lifeline rendering for East Asian wide characters. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
drunkhacker
added a commit
to drunkhacker/mermaid-ascii
that referenced
this pull request
Feb 11, 2026
Use a custom runewidth.Condition with EastAsianWidth=false to properly calculate display widths for both box drawing characters and CJK text. The issue: runewidth library treats box drawing characters (┌, ─, │) as East Asian Ambiguous, returning width=2, while they actually display as width=1 in most terminals. This caused misalignment when CJK characters (which correctly have width=2) were used in participant names. Changes: - Add widthCondition with EastAsianWidth=false for consistent width calculation - Replace runewidth.StringWidth() with widthCondition.StringWidth() - Rewrite label rendering to use display width-based positioning - Add east_asian_characters.txt test case with Japanese, Korean, Chinese Based on upstream PR AlexanderGrooff#55 by ColtWindy, adapted for multi-line label support. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
We need this ！ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fix sequence diagram rendering for CJK (Chinese, Japanese, Korean) characters.
Before
Boxes misaligned, labels positioned incorrectly:
After
Correct alignment with mixed English/Japanese/Korean/Chinese:
Root Cause
runewidth.StringWidth()treats box-drawing characters (┌, ─, │) as "East Asian Ambiguous" with width=2, but terminals display them as width=1Label positioning used rune index instead of display width, causing CJK characters (width=2) to shift incorrectly
Solution
runewidth.Condition{EastAsianWidth: false}for consistent width calculationTest
Added
east_asian_characters.txtwith Japanese, Korean, and Chinese text in participant names and message labels.