Mermaid.jsのノードに角括弧を記述したい
Q&A
Closed
解決したいこと
Mermaid.jsでノードに描画する文字に、
- [
- 「
など、括弧が入っていると、エラーになります。
文字列として、[ や「 を扱いたいです。
発生している問題・エラー
仮に、AにつながるBについて、BをB[123]という文字列で表示させたいと思います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/mermaid/dist/mermaid.min.css">
<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
<title>Document</title>
</head>
<body>
<div class="mermaid">
graph TD
A-->B[123]
A-->C
B-->D
B-->E
E-->F
F-->G
</div>
</body>
</html>
しかし、これでは123というノードが出来上がります。これは、Bをidとして、[]で囲った文字を表示するようにプログラムされているからだと思います。確かに[]で囲むと、長方形のノードが出来上がります。
次に、
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/mermaid/dist/mermaid.min.css">
<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
<title>Document</title>
</head>
<body>
<div class="mermaid">
graph TD
A-->B\[123\]
A-->C
B-->D
B-->E
E-->F
F-->G
</div>
</body>
</html>
とすると、123\というノードとBというノードが二つできあがってしまいました。
自分で試したこと
A --> B`[`123`]`とすると、
Syntax error in textとなりました。
お力添えいただけますと幸いです。よろしくお願いします。
0
