mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-20 07:49:43 +02:00
313 lines
8.9 KiB
HTML
313 lines
8.9 KiB
HTML
<!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>
|