CalvinBackup/anonymous_github
1
0
Fork 0
mirror of https://github.com/tdurieux/anonymous_github.git synced 2026-04-21 12:56:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

(feat): added mermaid rendering support in markdown (#676)

Browse Source
This commit is contained in:
Thomas Durieux
2026-04-15 09:56:35 +02:00
committed by GitHub
parent 85f05cd698
commit 2621dfd7fc
9 changed files with 5657 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gulpfile.js
+3
View File
@@ -22,6 +22,8 @@ function defaultTask(cb) {
"public/script/external/katex.min.js",
"public/script/external/katex-auto-render.min.js",
"public/script/external/marked-katex-extension.umd.min.js",
"public/script/external/mermaid.min.js",
"public/script/external/marked-mermaid.js",
"public/script/external/notebook.min.js",
"public/script/external/org.js",
"public/script/external/jquery-3.4.1.min.js",
@@ -39,6 +41,7 @@ function defaultTask(cb) {
"public/css/font-awesome.min.css",
"public/css/notebook.css",
"public/css/katex.min.css",
"public/css/mermaid.css",
"public/css/github-markdown.min.css",
"public/css/style.css",
];
public/css/all.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
public/css/mermaid.css
+84
View File
@@ -0,0 +1,84 @@
/* Mermaid diagram styles */
.mermaid {
text-align: center;
margin: 1em 0;
overflow: auto;
}
/* Ensure diagrams are responsive */
.mermaid svg {
max-width: 100%;
height: auto;
}
/* Dark mode support for Mermaid diagrams */
.dark-mode .mermaid {
filter: invert(1) hue-rotate(180deg);
}
.dark-mode .mermaid svg {
background: transparent;
}
/* Ensure text remains readable in dark mode */
.dark-mode .mermaid .nodeLabel,
.dark-mode .mermaid .edgeLabel {
filter: invert(1) hue-rotate(180deg);
}
/* Custom styling for different diagram types */
.mermaid .node rect,
.mermaid .node circle,
.mermaid .node ellipse,
.mermaid .node polygon {
stroke-width: 2px;
}
/* Flowchart specific styles */
.mermaid .flowchart-link {
stroke-width: 2px;
}
/* Sequence diagram specific styles */
.mermaid .actor {
fill: #f9f9f9;
stroke: #333;
stroke-width: 2px;
}
.mermaid .messageLine0,
.mermaid .messageLine1 {
stroke: #333;
stroke-width: 1.5px;
}
/* Gantt chart specific styles */
.mermaid .section0,
.mermaid .section1,
.mermaid .section2,
.mermaid .section3 {
opacity: 0.8;
}
/* Pie chart specific styles */
.mermaid .pieChart .slice {
opacity: 0.9;
}
/* Make sure diagrams are visible in the markdown content area */
.markdown-body .mermaid {
background: transparent;
border: none;
padding: 10px;
}
/* Error handling for failed diagrams */
.mermaid .error {
color: #d32f2f;
font-family: monospace;
font-size: 12px;
padding: 10px;
border: 1px solid #d32f2f;
border-radius: 4px;
background-color: #ffebee;
}
public/script/bundle.min.js
Vendored
+2617 -2
View File
File diff suppressed because one or more lines are too long
public/script/external/marked-mermaid.js
Vendored
+70
View File
@@ -0,0 +1,70 @@
// Marked.js extension for Mermaid diagrams
function markedMermaid(options) {
options = options || {};
return {
extensions: [
{
name: 'mermaid',
level: 'block',
start(src) {
return src.match(/^```mermaid/m)?.index;
},
tokenizer(src, tokens) {
const rule = /^```mermaid\n([\s\S]*?)\n```/;
const match = rule.exec(src);
if (match) {
return {
type: 'mermaid',
raw: match[0],
text: match[1].trim()
};
}
},
renderer(token) {
const id = 'mermaid-' + Math.random().toString(36).substr(2, 9);
// Initialize Mermaid if not already done
if (typeof mermaid !== 'undefined' && !window.mermaidInitialized) {
mermaid.initialize({
startOnLoad: false,
theme: 'default',
securityLevel: 'loose'
});
window.mermaidInitialized = true;
}
// Create a div that will be processed by Mermaid
const div = `<div class="mermaid" id="${id}">${token.text}</div>`;
// Schedule Mermaid rendering for after DOM insertion
setTimeout(() => {
if (typeof mermaid !== 'undefined') {
try {
const element = document.getElementById(id);
if (element && !element.getAttribute('data-processed')) {
mermaid.init(undefined, element);
element.setAttribute('data-processed', 'true');
}
} catch (error) {
console.error('Mermaid rendering error:', error);
}
}
}, 0);
return div;
}
}
]
};
}
// Make it available globally
if (typeof window !== 'undefined') {
window.markedMermaid = markedMermaid;
}
// CommonJS/Node.js export
if (typeof module !== 'undefined' && module.exports) {
module.exports = markedMermaid;
}
public/script/external/mermaid.min.js
Vendored
+2659
View File
File diff suppressed because one or more lines are too long
public/script/utils.js
+1
View File
@@ -182,5 +182,6 @@ function renderMD(md, baseUrlValue) {
throwOnError: false,
})
);
marked.use(markedMermaid());
return DOMPurify.sanitize(marked.parse(md, { renderer }));
}
test-mermaid.html
+176
View File
@@ -0,0 +1,176 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mermaid Test - Anonymous GitHub</title>
<!-- Include CSS from the built bundle -->
<link rel="stylesheet" href="public/css/bootstrap.min.css">
<link rel="stylesheet" href="public/css/github-markdown.min.css">
<link rel="stylesheet" href="public/css/mermaid.css">
<link rel="stylesheet" href="public/css/style.css">
<style>
body { padding: 20px; }
.test-section {
margin: 30px 0;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}
.markdown-body { max-width: 100%; }
.status {
padding: 10px;
margin: 10px 0;
border-radius: 4px;
}
.success { background-color: #d4edda; color: #155724; }
.error { background-color: #f8d7da; color: #721c24; }
</style>
</head>
<body>
<div class="container">
<h1>Mermaid Support Test</h1>
<div class="status" id="status">
<strong>Status:</strong> <span id="statusText">Loading...</span>
</div>
<!-- Test markdown content -->
<div class="test-section">
<h2>Test Input (Markdown)</h2>
<pre id="markdownInput"># Test Document
## Simple Flowchart
```mermaid
graph TD
A[Start] --> B{Test Working?}
B -->|Yes| C[✅ Success!]
B -->|No| D[❌ Failed]
D --> E[Check Console]
C --> F[Mermaid Renders!]
```
## Sequence Diagram
```mermaid
sequenceDiagram
participant User
participant App
participant Mermaid
User->>App: Load page
App->>Mermaid: Render diagram
Mermaid-->>App: SVG output
App-->>User: Display diagram
```</pre>
</div>
<div class="test-section">
<h2>Rendered Output</h2>
<div class="markdown-body" id="renderedOutput">
<!-- Rendered content will appear here -->
</div>
</div>
<div class="test-section">
<h2>Console Output</h2>
<pre id="consoleOutput" style="background: #f8f9fa; padding: 10px; max-height: 200px; overflow-y: auto;"></pre>
</div>
</div>
<!-- Include JavaScript libraries in correct order -->
<script src="public/script/external/jquery-3.4.1.min.js"></script>
<script src="public/script/external/github-emojis.js"></script>
<script src="public/script/external/marked-emoji.js"></script>
<script src="public/script/external/marked.min.js"></script>
<script src="public/script/external/katex.min.js"></script>
<script src="public/script/external/marked-katex-extension.umd.min.js"></script>
<script src="public/script/external/mermaid.min.js"></script>
<script src="public/script/external/marked-mermaid.js"></script>
<script src="public/script/utils.js"></script>
<script>
// Capture console logs
const originalLog = console.log;
const originalError = console.error;
const consoleOutput = document.getElementById('consoleOutput');
function addToConsole(type, message) {
consoleOutput.textContent += `[${type.toUpperCase()}] ${message}\n`;
consoleOutput.scrollTop = consoleOutput.scrollHeight;
}
console.log = function(...args) {
originalLog.apply(console, args);
addToConsole('log', args.join(' '));
};
console.error = function(...args) {
originalError.apply(console, args);
addToConsole('error', args.join(' '));
};
// Test the Mermaid integration
document.addEventListener('DOMContentLoaded', function() {
const statusText = document.getElementById('statusText');
const status = document.getElementById('status');
const markdownInput = document.getElementById('markdownInput').textContent;
const renderedOutput = document.getElementById('renderedOutput');
try {
console.log('Starting Mermaid test...');
// Check if required functions are available
if (typeof marked === 'undefined') {
throw new Error('marked.js not loaded');
}
if (typeof mermaid === 'undefined') {
throw new Error('mermaid.js not loaded');
}
if (typeof markedMermaid === 'undefined') {
throw new Error('marked-mermaid.js not loaded');
}
if (typeof renderMD === 'undefined') {
throw new Error('renderMD function not loaded');
}
console.log('All required libraries loaded');
// Test the rendering
const rendered = renderMD(markdownInput);
renderedOutput.innerHTML = rendered;
console.log('Markdown processed, checking for Mermaid elements...');
// Check if mermaid elements were created
const mermaidElements = renderedOutput.querySelectorAll('.mermaid');
console.log(`Found ${mermaidElements.length} mermaid elements`);
if (mermaidElements.length > 0) {
statusText.textContent = `SUCCESS! Found ${mermaidElements.length} Mermaid diagram(s)`;
status.className = 'status success';
// Wait a bit for diagrams to render
setTimeout(() => {
mermaidElements.forEach((el, index) => {
const svg = el.querySelector('svg');
if (svg) {
console.log(`Diagram ${index + 1}: Successfully rendered as SVG`);
} else {
console.log(`Diagram ${index + 1}: Still rendering or failed`);
}
});
}, 2000);
} else {
statusText.textContent = '❌ FAILED: No Mermaid elements found in rendered output';
status.className = 'status error';
}
} catch (error) {
console.error('Test failed:', error.message);
statusText.textContent = `❌ ERROR: ${error.message}`;
status.className = 'status error';
}
});
</script>
</body>
</html>
test-mermaid.md
+46
View File
@@ -0,0 +1,46 @@
# Mermaid Test File
## Simple Flowchart
```mermaid
graph TD
A[Start] --> B{Is it working?}
B -->|Yes| C[🎉 Success!]
B -->|No| D[Check console]
D --> B
C --> E[End]
```
## Sequence Diagram
```mermaid
sequenceDiagram
participant U as User
participant A as App
participant G as GitHub
U->>A: Upload repo
A->>G: Fetch data
G-->>A: Repository content
A->>A: Anonymize
A-->>U: Show result
```
## Simple Pie Chart
```mermaid
pie title Test Languages
"JavaScript" : 50
"CSS" : 30
"HTML" : 20
```
## State Diagram
```mermaid
stateDiagram-v2
[*] --> Idle
Idle --> Processing
Processing --> Complete
Complete --> [*]
Processing --> Error
Error --> [*]
```
If you can see the diagrams above rendered as interactive graphics (not as code blocks), then Mermaid is working correctly!