Я надеюсь использовать русалку на страницах GitHub с простой фиксацией и нажатием.
Другими словами, я надеюсь написать в моем файле уценки вот так
```mermaid
graph LR
A --> B
A -->C
C -->D
```
и добавьте несколько js в мой _layouts / post.html, чтобы каким-то образом преобразовать это в график русалки.
Я обнаружил, что эта тема утверждает, что она поддерживает такую вещь. Но эта тема кажется мне слишком тяжелой, js было слишком много, поэтому я подумал, что могу использовать только эту file, который просто
<script>
window.Lazyload.js('{{ _sources.mermaid }}', function() {
mermaid.initialize({
startOnLoad: true
});
mermaid.init(undefined, '.language-mermaid');
});
</script>
В моем _include / mermaid.html я заменил {{ _sources.mermaid }}
на cdn русалки
<script>
window.Lazyload.js('https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js', function() {
mermaid.initialize({
startOnLoad: true
});
mermaid.init(undefined, '.language-mermaid');
});
</script>
это все равно не сработает. В моем посте это было показано как обычные блоки кода, а не как диаграмма русалки.
Изменить: в представлении разработчика Chrome я не вижу никаких подключений к ссылке https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js
.
И я попробовал этот код, соединение с русалкой, сделанное в теге network
в представлении разработчика, но диаграмма русалки по-прежнему не работает
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js"></script>
<script>
var config = {
startOnReady:true,
theme: 'forest',
flowchart:{
useMaxWidth:false,
htmlLabels:true
}
};
mermaid.initialize(config);
mermaid.init(undefined, '.language-mermaid');
</script>