mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-10-06 15:49:44 +02:00
331 lines
9.3 KiB
HTML
331 lines
9.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<title>Mermaid Class 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;
|
|
}
|
|
|
|
.broken {
|
|
background: #fff3e0;
|
|
border: 1px solid #ff9800;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
.diagram-code {
|
|
background: #f5f5f5;
|
|
border: 1px solid #ddd;
|
|
padding: 10px;
|
|
margin: 10px 0;
|
|
font-family: monospace;
|
|
white-space: pre-wrap;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>🎯 Mermaid Class 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: Simple Class Diagram</h2>
|
|
<p>Basic class diagram to test ANTLR parser functionality:</p>
|
|
<pre class="mermaid">
|
|
classDiagram
|
|
class Animal {
|
|
+name: string
|
|
+age: int
|
|
+makeSound()
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Test 2: Class with Relationships</h2>
|
|
<p>Testing class relationships:</p>
|
|
<pre class="mermaid">
|
|
classDiagram
|
|
class Animal {
|
|
+name: string
|
|
+makeSound()
|
|
}
|
|
class Dog {
|
|
+breed: string
|
|
+bark()
|
|
}
|
|
Animal <|-- Dog
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="test-section broken">
|
|
<h2>🚨 Test 3: BROKEN DIAGRAM - Debug Target</h2>
|
|
<p><strong>This is the problematic diagram that needs debugging:</strong></p>
|
|
<div class="diagram-code">classDiagram
|
|
class Person {
|
|
+ID : Guid
|
|
+FirstName : string
|
|
+LastName : string
|
|
-privateProperty : string
|
|
#ProtectedProperty : string
|
|
~InternalProperty : string
|
|
~AnotherInternalProperty : List~List~string~~
|
|
}
|
|
class People List~List~Person~~</div>
|
|
<p><strong>Expected Error:</strong> Parse error on line 11: Expecting 'STR'</p>
|
|
<pre class="mermaid">
|
|
classDiagram
|
|
class Person {
|
|
+ID : Guid
|
|
+FirstName : string
|
|
+LastName : string
|
|
-privateProperty : string
|
|
#ProtectedProperty : string
|
|
~InternalProperty : string
|
|
~AnotherInternalProperty : List~List~string~~
|
|
}
|
|
class People List~List~Person~~
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Test 4: Generic Types (Simplified)</h2>
|
|
<p>Testing simpler generic type syntax:</p>
|
|
<pre class="mermaid">
|
|
classDiagram
|
|
class Person {
|
|
+ID : Guid
|
|
+FirstName : string
|
|
+LastName : string
|
|
}
|
|
class People {
|
|
+items : List~Person~
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Test 5: Visibility Modifiers</h2>
|
|
<p>Testing different visibility modifiers:</p>
|
|
<pre class="mermaid">
|
|
classDiagram
|
|
class TestClass {
|
|
+publicField : string
|
|
-privateField : string
|
|
#protectedField : string
|
|
~packageField : string
|
|
+publicMethod()
|
|
-privateMethod()
|
|
#protectedMethod()
|
|
~packageMethod()
|
|
}
|
|
</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: 'false', // Use listener pattern
|
|
ANTLR_DEBUG: 'true'
|
|
};
|
|
|
|
console.log('🎯 Class 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') ||
|
|
args[0].includes('ClassDB:') ||
|
|
args[0].includes('ClassListener:') ||
|
|
args[0].includes('ClassVisitor:') ||
|
|
args[0].includes('ClassParserCore:') ||
|
|
args[0].includes('Class ANTLR') ||
|
|
args[0].includes('🔧') ||
|
|
args[0].includes('❌') ||
|
|
args[0].includes('✅')
|
|
)) {
|
|
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',
|
|
class: {
|
|
titleTopMargin: 25,
|
|
diagramPadding: 50,
|
|
htmlLabels: false
|
|
},
|
|
});
|
|
|
|
// 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('🎯 Class 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} class diagrams`);
|
|
|
|
// Check if diagrams rendered successfully
|
|
const renderedElements = document.querySelectorAll('.mermaid svg');
|
|
if (renderedElements.length > 0) {
|
|
console.log('✅ Class 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(`📋 Class Diagram ${index + 1} content:`, element.textContent.trim());
|
|
if (element.innerHTML.includes('error') || element.innerHTML.includes('Error')) {
|
|
console.log(`❌ Error found in class diagram ${index + 1}:`, element.innerHTML);
|
|
}
|
|
});
|
|
}
|
|
}, 3000);
|
|
</script>
|
|
</body>
|
|
|
|
</html> |