marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-20 15:59:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

fixed broken test in sequence migration to antlr new strucuture

Browse Source
This commit is contained in:
Ashish Jain
2025-09-18 12:58:43 +02:00
parent 5c97faf45b
commit 574d76c674
4 changed files with 428 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

312
demos/sequence-antlr-test.html Normal file
View File

@@ -0,0 +1,312 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Sequence ANTLR Parser Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style>
body {
font-family: 'Courier New', Courier, monospace;
margin: 20px;
background-color: #f5f5f5;
}
.test-section {
background: white;
padding: 20px;
margin: 20px 0;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.parser-info {
background: #e3f2fd;
border: 1px solid #2196f3;
padding: 15px;
border-radius: 5px;
margin-bottom: 20px;
}
.success {
background: #e8f5e8;
border: 1px solid #4caf50;
}
.error {
background: #ffebee;
border: 1px solid #f44336;
}
div.mermaid {
font-family: 'Courier New', Courier, monospace !important;
}
h1 {
color: #1976d2;
}
h2 {
color: #424242;
border-bottom: 2px solid #e0e0e0;
padding-bottom: 5px;
}
#debug-logs {
border: 1px solid #ccc;
padding: 10px;
margin: 10px 0;
max-height: 400px;
overflow-y: auto;
font-family: monospace;
font-size: 12px;
background: #f9f9f9;
}
</style>
</head>
<body>
<h1>🎯 Mermaid Sequence ANTLR Parser Test Page</h1>
<div class="parser-info">
<h3>🔧 Parser Information</h3>
<p><strong>Environment Variable:</strong> <code id="env-var">Loading...</code></p>
<p><strong>Expected:</strong> <code>USE_ANTLR_PARSER=true</code></p>
<p><strong>Status:</strong> <span id="parser-status">Checking...</span></p>
</div>
<div class="test-section">
<h2>Test 1: Basic Sequence Diagram</h2>
<p>Simple sequence diagram to test basic ANTLR parser functionality:</p>
<pre class="mermaid">
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
Bob-->>Alice: Great!
</pre>
</div>
<div class="test-section">
<h2>Test 2: Participants and Actors</h2>
<p>Testing participant and actor declarations:</p>
<pre class="mermaid">
sequenceDiagram
participant A as Alice
participant B as Bob
actor C as Charlie
A->>B: Hello Bob
B->>C: Hi Charlie
C-->>A: Hello Alice
</pre>
</div>
<div class="test-section">
<h2>Test 3: Different Arrow Types</h2>
<p>Testing various arrow types and message formats:</p>
<pre class="mermaid">
sequenceDiagram
Alice->>Bob: Solid arrow
Bob-->>Alice: Dotted arrow
Alice-xBob: Cross ending
Bob--xAlice: Dotted cross
Alice-)Bob: Open arrow
Bob--)Alice: Dotted open
</pre>
</div>
<div class="test-section">
<h2>Test 4: Activation Boxes</h2>
<p>Testing activation boxes and lifelines:</p>
<pre class="mermaid">
sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!
</pre>
</div>
<div class="test-section">
<h2>Test 5: Notes and Comments</h2>
<p>Testing notes over participants:</p>
<pre class="mermaid">
sequenceDiagram
participant Alice
participant Bob
Alice->>Bob: Hello Bob
Note over Alice,Bob: This is a note over both
Note right of Bob: This note is on right of Bob
Note left of Alice: This note is on left of Alice
Bob-->>Alice: Hi Alice
</pre>
</div>
<div class="test-section">
<h2>Test 6: Loops and Alt</h2>
<p>Testing control flow structures:</p>
<pre class="mermaid">
sequenceDiagram
Alice->>Bob: Hello Bob
loop Every minute
Bob-->>Alice: Great!
end
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
</pre>
</div>
<script type="module">
import mermaid from './mermaid.esm.mjs';
// Configure ANTLR parser for browser environment
window.MERMAID_CONFIG = {
USE_ANTLR_PARSER: 'true',
USE_ANTLR_VISITOR: 'true',
ANTLR_DEBUG: 'true'
};
console.log('🎯 Sequence ANTLR Configuration:', window.MERMAID_CONFIG);
// Override console methods to capture logs
const originalLog = console.log;
const originalError = console.error;
function createLogDiv() {
const logDiv = document.createElement('div');
logDiv.id = 'debug-logs';
logDiv.innerHTML = '<h3>🔍 Debug Logs:</h3>';
document.body.appendChild(logDiv);
return logDiv;
}
console.log = function (...args) {
originalLog.apply(console, args);
// Display important logs on page
if (args[0] && typeof args[0] === 'string' && (
args[0].includes('ANTLR Parser:') ||
args[0].includes('SequenceDB:') ||
args[0].includes('SequenceListener:') ||
args[0].includes('SequenceVisitor:') ||
args[0].includes('SequenceParserCore:') ||
args[0].includes('Sequence ANTLR')
)) {
const logDiv = document.getElementById('debug-logs') || createLogDiv();
logDiv.innerHTML += '<div style="color: blue; margin: 2px 0;">' + args.join(' ') + '</div>';
}
};
console.error = function (...args) {
originalError.apply(console, args);
const logDiv = document.getElementById('debug-logs') || createLogDiv();
logDiv.innerHTML += '<div style="color: red; margin: 2px 0;">ERROR: ' + args.join(' ') + '</div>';
};
// Initialize mermaid
mermaid.initialize({
theme: 'default',
logLevel: 3,
securityLevel: 'loose',
sequence: {
diagramMarginX: 50,
diagramMarginY: 10,
actorMargin: 50,
width: 150,
height: 65,
boxMargin: 10,
boxTextMargin: 5,
noteMargin: 10,
messageMargin: 35
},
});
// Check environment and parser status
let envVar = 'undefined';
try {
if (typeof process !== 'undefined' && process.env) {
envVar = process.env.USE_ANTLR_PARSER || 'undefined';
}
} catch (e) {
envVar = 'browser-default';
}
const envElement = document.getElementById('env-var');
const statusElement = document.getElementById('parser-status');
if (envElement) {
envElement.textContent = `USE_ANTLR_PARSER=${envVar || 'undefined'}`;
}
// Check for debug information from parser
setTimeout(() => {
if (window.MERMAID_PARSER_DEBUG) {
console.log('🔍 Found MERMAID_PARSER_DEBUG:', window.MERMAID_PARSER_DEBUG);
const debug = window.MERMAID_PARSER_DEBUG;
if (envElement) {
envElement.textContent = `USE_ANTLR_PARSER=${debug.env_value || 'undefined'} (actual: ${debug.USE_ANTLR_PARSER})`;
}
if (statusElement) {
if (debug.USE_ANTLR_PARSER) {
statusElement.innerHTML = '<span style="color: green;">✅ ANTLR Parser Active</span>';
statusElement.parentElement.parentElement.classList.add('success');
} else {
statusElement.innerHTML = '<span style="color: orange;">⚠️ Jison Parser (Default)</span>';
}
}
}
}, 1000);
if (statusElement) {
if (envVar === 'true') {
statusElement.innerHTML = '<span style="color: green;">✅ ANTLR Parser Active</span>';
statusElement.parentElement.parentElement.classList.add('success');
} else {
statusElement.innerHTML = '<span style="color: orange;">⚠️ Jison Parser (Default)</span>';
}
}
// Add debugging
console.log('🎯 Sequence ANTLR Parser Test Page Loaded');
console.log('🔧 Environment:', { USE_ANTLR_PARSER: envVar });
// Test if we can detect which parser is being used
setTimeout(() => {
const mermaidElements = document.querySelectorAll('.mermaid');
console.log(`📊 Found ${mermaidElements.length} sequence diagrams`);
// Check if diagrams rendered successfully
const renderedElements = document.querySelectorAll('.mermaid svg');
if (renderedElements.length > 0) {
console.log('✅ Sequence diagrams rendered successfully!');
console.log(`📈 ${renderedElements.length} SVG elements created`);
// Update status on page
const statusElement = document.getElementById('parser-status');
if (statusElement && envVar === 'true') {
statusElement.innerHTML = '<span style="color: green;">✅ ANTLR Parser Active & Rendering Successfully!</span>';
}
} else {
console.log('❌ No SVG elements found - check for rendering errors');
console.log('🔍 Checking for error messages...');
// Look for error messages in mermaid elements
mermaidElements.forEach((element, index) => {
console.log(`📋 Sequence Diagram ${index + 1} content:`, element.textContent.trim());
if (element.innerHTML.includes('error') || element.innerHTML.includes('Error')) {
console.log(`❌ Error found in sequence diagram ${index + 1}:`, element.innerHTML);
}
});
}
}, 3000);
</script>
</body>
</html>

2
packages/mermaid/src/diagrams/sequence/parser/antlr/SequenceListener.ts
View File

@@ -37,6 +37,8 @@ export class SequenceListener extends SequenceParserCore implements ParseTreeLis
// Optional: Handle error nodes // Optional: Handle error nodes
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.log('❌ SequenceListener: Error node encountered'); console.log('❌ SequenceListener: Error node encountered');
// Throw error to match Jison parser behavior for syntax errors
throw new Error('Syntax error in sequence diagram');
}; };
// Loop block handlers // Loop block handlers

136
packages/mermaid/src/diagrams/sequence/parser/antlr/SequenceParserCore.ts
View File

@@ -273,14 +273,16 @@ export class SequenceParserCore {
try { try {
const raw = ctx.restOfLine?.()?.getText?.() as string | undefined; const raw = ctx.restOfLine?.()?.getText?.() as string | undefined;
const line = raw ? (raw.startsWith(':') ? raw.slice(1) : raw).trim() : ''; const line = raw ? (raw.startsWith(':') ? raw.slice(1) : raw).trim() : '';
const data = this.db.parseBoxData(line); // RECT should generate RECT_START signal with parsed message, matching Jison behavior
this.db.addBox(data); const parsedMessage = this.db.parseMessage(line);
this.db.addSignal(undefined, undefined, parsedMessage, this.db.LINETYPE.RECT_START);
} catch {} } catch {}
} }
protected processRectBlockExit(): void { protected processRectBlockExit(): void {
try { try {
this.db.boxEnd(); // RECT should generate RECT_END signal, not box end
this.db.addSignal(undefined, undefined, undefined, this.db.LINETYPE.RECT_END);
} catch {} } catch {}
} }
@@ -341,6 +343,14 @@ export class SequenceParserCore {
} catch {} } catch {}
} }
// Helper method to ensure actor exists (matching Jison behavior)
protected ensureActorExists(actorId: string): void {
if (!this.db.getActors().has(actorId)) {
// Create actor implicitly with default participant type
this.db.addActor(actorId, actorId, { text: actorId, type: 'participant' }, 'participant');
}
}
// Signal statement processing // Signal statement processing
protected processSignalStatement(ctx: any): void { protected processSignalStatement(ctx: any): void {
try { try {
@@ -355,19 +365,45 @@ export class SequenceParserCore {
return; return;
} }
// Create actors implicitly if they don't exist (matching Jison behavior)
this.ensureActorExists(from);
this.ensureActorExists(to);
const signalType = ctx.signaltype?.()?.getText?.() as string | undefined; const signalType = ctx.signaltype?.()?.getText?.() as string | undefined;
if (!signalType) { if (!signalType) {
return; return;
} }
const msgText = ctx.text2?.()?.getText?.() as string | undefined; const rawText = ctx.text2?.()?.getText?.() as string | undefined;
// Strip leading colon from TXT token (TXT includes ':' prefix)
const msgText =
rawText && rawText.startsWith(':') ? rawText.slice(1).trim() : rawText?.trim();
const msg = msgText ? this.db.parseMessage(msgText) : undefined; const msg = msgText ? this.db.parseMessage(msgText) : undefined;
const lineType = this.mapSignalType(signalType); const lineType = this.mapSignalType(signalType);
// Check for activation/deactivation symbols (matching original ANTLR logic)
const hasPlus = !!ctx.PLUS?.();
const hasMinus = !!ctx.MINUS?.();
if (lineType !== undefined) { if (lineType !== undefined) {
this.db.addSignal(from, to, msg, lineType); // Main signal; pass 'activate' flag if there is a plus before the target actor
this.db.addSignal(from, to, msg, lineType, hasPlus);
// One-line activation/deactivation side-effects (matching original ANTLR logic)
if (hasPlus && to) {
this.db.addSignal(to, undefined, undefined, this.db.LINETYPE.ACTIVE_START);
}
if (hasMinus && from) {
this.db.addSignal(from, undefined, undefined, this.db.LINETYPE.ACTIVE_END);
}
} }
} catch {} } catch (error) {
// Re-throw validation errors (like activation errors) so tests can catch them
if (error instanceof Error && error.message.includes('inactivate an inactive participant')) {
throw error;
}
// Silently ignore other parsing errors
}
} }
// Note statement processing // Note statement processing
@@ -378,13 +414,46 @@ export class SequenceParserCore {
const actor1 = actors?.[0]?.getText?.() as string | undefined; const actor1 = actors?.[0]?.getText?.() as string | undefined;
const actor2 = actors?.[1]?.getText?.() as string | undefined; const actor2 = actors?.[1]?.getText?.() as string | undefined;
const msgText = ctx.text2?.()?.getText?.() as string | undefined; // Ensure actors exist
const msg = msgText ? this.db.parseMessage(msgText) : undefined; if (actor1) {
this.ensureActorExists(actor1);
}
if (actor2) {
this.ensureActorExists(actor2);
}
const rawText = ctx.text2?.()?.getText?.() as string | undefined;
// Strip leading colon from TXT token (TXT includes ':' prefix)
const msgText =
rawText && rawText.startsWith(':') ? rawText.slice(1).trim() : rawText?.trim();
const msg = msgText ? this.db.parseMessage(msgText) : { text: msgText || '' };
// Use the same pattern as Jison parser: create addNote object and let db.apply() handle it
if (placement === 'over' && actor2) { if (placement === 'over' && actor2) {
this.db.addSignal(actor1, actor2, msg, this.db.LINETYPE.NOTE); // Note over two actors: Alice,Bob (pass array of actor strings)
const payload = {
type: 'addNote' as const,
placement: this.db.PLACEMENT.OVER,
actor: [actor1, actor2],
text: msg,
};
this.db.apply(payload);
} else if (actor1) { } else if (actor1) {
this.db.addSignal(actor1, undefined, msg, this.db.LINETYPE.NOTE, placement); // Note over single actor or left/right of actor (pass actor string)
const placementValue =
placement === 'over'
? this.db.PLACEMENT.OVER
: placement === 'leftOf'
? this.db.PLACEMENT.LEFTOF
: this.db.PLACEMENT.RIGHTOF;
const payload = {
type: 'addNote' as const,
placement: placementValue,
actor: actor1,
text: msg,
};
this.db.apply(payload);
} }
} catch {} } catch {}
} }
@@ -396,7 +465,10 @@ export class SequenceParserCore {
if (!actor) { if (!actor) {
return; return;
} }
const msgText = ctx.text2?.()?.getText?.() as string | undefined; const rawText = ctx.text2?.()?.getText?.() as string | undefined;
// Strip leading colon from TXT token (TXT includes ':' prefix)
const msgText =
rawText && rawText.startsWith(':') ? rawText.slice(1).trim() : rawText?.trim();
const msg = msgText ? this.db.parseMessage(msgText) : undefined; const msg = msgText ? this.db.parseMessage(msgText) : undefined;
this.db.addLinks(actor, msg); this.db.addLinks(actor, msg);
} catch {} } catch {}
@@ -409,9 +481,13 @@ export class SequenceParserCore {
if (!actor) { if (!actor) {
return; return;
} }
const msgText = ctx.text2?.()?.getText?.() as string | undefined; const rawText = ctx.text2?.()?.getText?.() as string | undefined;
// Strip leading colon from TXT token (TXT includes ':' prefix)
const msgText =
rawText && rawText.startsWith(':') ? rawText.slice(1).trim() : rawText?.trim();
const msg = msgText ? this.db.parseMessage(msgText) : undefined; const msg = msgText ? this.db.parseMessage(msgText) : undefined;
this.db.addLink(actor, msg); // Use addALink for single link format (not addLink)
this.db.addALink(actor, msg);
} catch {} } catch {}
} }
@@ -422,7 +498,10 @@ export class SequenceParserCore {
if (!actor) { if (!actor) {
return; return;
} }
const msgText = ctx.text2?.()?.getText?.() as string | undefined; const rawText = ctx.text2?.()?.getText?.() as string | undefined;
// Strip leading colon from TXT token (TXT includes ':' prefix)
const msgText =
rawText && rawText.startsWith(':') ? rawText.slice(1).trim() : rawText?.trim();
const msg = msgText ? this.db.parseMessage(msgText) : undefined; const msg = msgText ? this.db.parseMessage(msgText) : undefined;
this.db.addProperties(actor, msg); this.db.addProperties(actor, msg);
} catch {} } catch {}
@@ -435,7 +514,10 @@ export class SequenceParserCore {
if (!actor) { if (!actor) {
return; return;
} }
const msgText = ctx.text2?.()?.getText?.() as string | undefined; const rawText = ctx.text2?.()?.getText?.() as string | undefined;
// Strip leading colon from TXT token (TXT includes ':' prefix)
const msgText =
rawText && rawText.startsWith(':') ? rawText.slice(1).trim() : rawText?.trim();
const msg = msgText ? this.db.parseMessage(msgText) : undefined; const msg = msgText ? this.db.parseMessage(msgText) : undefined;
this.db.addDetails(actor, msg); this.db.addDetails(actor, msg);
} catch {} } catch {}
@@ -457,29 +539,36 @@ export class SequenceParserCore {
} else if (isDeactivate) { } else if (isDeactivate) {
this.db.addSignal(actor, undefined, undefined, this.db.LINETYPE.ACTIVE_END); this.db.addSignal(actor, undefined, undefined, this.db.LINETYPE.ACTIVE_END);
} }
} catch {} } catch (error) {
// Re-throw validation errors (like activation errors) so tests can catch them
if (error instanceof Error && error.message.includes('inactivate an inactive participant')) {
throw error;
}
// Silently ignore other parsing errors
}
} }
// Autonumber statement processing // Autonumber statement processing
protected processAutonumberStatement(ctx: any): void { protected processAutonumberStatement(ctx: any): void {
try { try {
const isOff = !!ctx.OFF?.(); const isOff = !!ctx.OFF?.();
const numTok = ctx.NUM?.(); // The grammar uses ACTOR tokens for numbers, not NUM tokens
const nums = Array.isArray(numTok) ? numTok : numTok ? [numTok] : []; const actorTok = ctx.ACTOR?.();
const numTexts = nums.map((n) => n.getText?.() as string).filter(Boolean); const actors = Array.isArray(actorTok) ? actorTok : actorTok ? [actorTok] : [];
const actorTexts = actors.map((n) => n.getText?.() as string).filter(Boolean);
let start: number | undefined; let start: number | undefined;
let step: number | undefined; let step: number | undefined;
if (numTexts.length >= 1) { if (actorTexts.length >= 1) {
const v = Number.parseInt(numTexts[0], 10); const v = Number.parseInt(actorTexts[0], 10);
if (!Number.isNaN(v)) { if (!Number.isNaN(v)) {
start = v; start = v;
} }
} }
if (numTexts.length >= 2) { if (actorTexts.length >= 2) {
const v = Number.parseInt(numTexts[1], 10); const v = Number.parseInt(actorTexts[1], 10);
if (!Number.isNaN(v)) { if (!Number.isNaN(v)) {
step = v; step = v;
} }
@@ -499,7 +588,6 @@ export class SequenceParserCore {
sequenceVisible: visible, sequenceVisible: visible,
signalType: this.db.LINETYPE.AUTONUMBER, signalType: this.db.LINETYPE.AUTONUMBER,
}; };
this.db.apply(payload); this.db.apply(payload);
} catch {} } catch {}
} }

3
packages/mermaid/src/diagrams/sequence/parser/antlr/SequenceVisitor.ts
View File

@@ -70,7 +70,8 @@ export class SequenceVisitor extends SequenceParserCore implements SequenceParse
visitErrorNode(_node: any): any { visitErrorNode(_node: any): any {
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.log('❌ SequenceVisitor: Error node encountered'); console.log('❌ SequenceVisitor: Error node encountered');
return null; // Throw error to match Jison parser behavior for syntax errors
throw new Error('Syntax error in sequence diagram');
} }
// Loop block visitors // Loop block visitors