Có, bạn chỉ cần tạo một khối code block với nội dung là mermaid script kiểu thế này là được:
```mermaid
flowchart TD
A[Start] --> B{Is Markdown Table?}
B -- Yes --> C[Convert to HTML]
B -- No --> D[Keep Original Text]
C --> E[Return Result]
D --> E[Return Result]
```
Kết quả bạn nhận được là:
flowchart TD
A[Start] --> B{Is Markdown Table?}
B -- Yes --> C[Convert to HTML]
B -- No --> D[Keep Original Text]
C --> E[Return Result]
D --> E[Return Result]
Về bản chất EzyPlatform Markdown không convert được từ các script của mermaid sang HTML, nó chỉ chuyển khối code sang dạng thẻ div pre với class nhận diện là source-mermaid, bạn sẽ cần include thư viện chính chủ của mermaid:
<script src="https://cdn.jsdelivr.net/npm/mermaid@11.12.2/dist/mermaid.min.js" integrity="sha256-0IMKbAVUbp7bj+IKj1RfPg3HxMMTTVhLrZwTqZ16ceA=" crossorigin="anonymous"></script>
Sau đó viết 1 đoạn đoạn code javascript để nó đi duyệt các khối có class là source-mermaid để tạo ra đồ thị.
Với javascript thuần:
<script>
mermaid.initialize({
startOnLoad: false,
theme: "default"
});
document.querySelectorAll('.source-mermaid pre').forEach((pre, index) => {
const code = pre.textContent.trim();
if (!code) {
return;
}
const container = document.createElement('div');
const id = 'mermaid-diagram-' + index;
container.className = 'mermaid';
container.id = id;
container.textContent = code;
pre.parentElement.replaceWith(container);
mermaid.render(id + '-svg', code).then(({ svg }) => {
container.innerHTML = svg;
}).catch(err => {
console.error('Mermaid render error:', err);
});
});
</script>
Với jquery:
mermaid.initialize({
startOnLoad: false,
theme: "default"
});
$('.source-mermaid pre').each(function (index) {
var preElement = $(this);
var code = $.trim(preElement.text());
if (!code) {
return;
}
var id = 'mermaid-diagram-' + index;
var $container = $('<div>', {
class: 'mermaid',
id: id,
text: code
});
preElement.parent().replaceWith($container);
mermaid
.render(id + '-svg', code)
.then(function (result) {
$container.html(result.svg);
})
.catch(function (err) {
console.error('Mermaid render error:', err);
});
});
