Project

General

Profile

Download (59.3 KB)

Feature #44636 » 0001-Describe-Mermaid-diagrams-in-the-wiki-syntax-help-pa.patch

Go MAEDA, 2026-10-18 15:23

View differences:

app/assets/stylesheets/wiki_syntax.css
57 57 
}
58 58 
table td { background-color: var(--oc-gray-0); block-size: 2em; vertical-align: middle;}
59 59 
table td code { font-size: 1.2em; }
60 
table td img { max-width: 100%; }
60 61 
table td h1 { font-size: 1.8em; text-align: start; }
61 62 
table td h2 { font-size: 1.4em; text-align: start; }
62 63 
table td h3 { font-size: 1.2em; text-align: start; }
app/views/help/wiki_syntax/common_mark/en/wiki_syntax_common_mark.html.erb
30 30 
</code></pre>
31 31 
</td></tr>
32 
<tr><th colspan="3">Mermaid diagrams <span class="more_info">(<a href="<%= help_wiki_syntax_path(:detailed, anchor: "17") %>" target="_blank">more</a>)</span></th></tr>
33 
<tr><th></th><td>```mermaid<br />flowchart LR<br />&nbsp;&nbsp;A[Start] --&gt; B[End]<br />```</td><td><%= image_tag("help/mermaid_flowchart_simple.png", width: 360, alt: "Flowchart from Start to End") %></td></tr>
34 

  		




  32
  35
  
    
<tr><th colspan="3">Line breaks and Paragraphs</th></tr>

  		




  33
  36
  
    
<tr><th></th><td>An empty line<br><br>creates<br>a new paragraph.</td><td><p>An empty line</p><p>creates a new paragraph.</p></td></tr>

  		




  34
  37
  
    
<tr><th></th><td>End a line with a backslash\<br> or two spaces to insert a manual line break.</td><td><p>End a line with a backslash<br>or two spaces to insert a manual line break.</p></td></tr>

  		












  

    
      app/views/help/wiki_syntax/common_mark/en/wiki_syntax_detailed_common_mark.html.erb
    
  





  26
  26
  
    
        </ul>

  		




  27
  27
  
    
        <li><a href='#12'>Macros</a></li>

  		




  28
  28
  
    
        <li><a href='#13'>Code highlighting</a></li>

  		




  
  29
  
    
        <li><a href='#17'>Mermaid diagrams</a></li>

  		




  29
  30
  
    
        <li><a href='#15'>Raw HTML</a></li>

  		




  30
  31
  
    
        <li><a href='#16'>Alerts</a></li>

  		




  31
  32
  
    
    </ul>

  		




  ......




  346
  347
  
    
<span class="k">end</span>

  		




  347
  348
  
    
</code></pre>

  		




  
  349
  
    
    <h2><a name="17" class="wiki-page"></a>Mermaid diagrams</h2>

  		




  
  350
  
    

  		




  
  351
  
    
    <p>Code blocks written in the <strong>mermaid</strong> language are rendered as diagrams, such as flowcharts, sequence diagrams and Gantt charts, by <a href="https://mermaid.js.org/" class="external">Mermaid.js</a>. Please refer to the <a href="https://mermaid.js.org/intro/syntax-reference.html" class="external">Mermaid syntax reference</a> for the available diagrams and their syntax.</p>

  		




  
  352
  
    

  		




  
  353
  
    
    <p>Mermaid.js is not bundled with Redmine, and diagrams are rendered only if the administrator has installed it. Otherwise, the code is displayed as a plain code block.</p>

  		




  
  354
  
    

  		




  
  355
  
    
    <p>You can draw a diagram at any place that supports wiki formatting using this syntax:</p>

  		




  
  356
  
    

  		




  
  357
  
    
<pre>

  		




  
  358
  
    
```mermaid

  		




  
  359
  
    
  Place your diagram definition here.

  		




  
  360
  
    
```

  		




  
  361
  
    
</pre>

  		




  
  362
  
    

  		




  
  363
  
    
    <p>Example:</p>

  		




  
  364
  
    

  		




  
  365
  
    
<pre>

  		




  
  366
  
    
```mermaid

  		




  
  367
  
    
flowchart LR

  		




  
  368
  
    
  A[New issue] --&gt; B{Reproducible?}

  		




  
  369
  
    
  B --&gt;|Yes| C[Fix]

  		




  
  370
  
    
  B --&gt;|No| D[Close]

  		




  
  371
  
    
```

  		




  
  372
  
    
</pre>

  		




  
  373
  
    

  		




  
  374
  
    
    <p>yields</p>

  		




  
  375
  
    

  		




  
  376
  
    
<%= image_tag("help/mermaid_flowchart_decision.png", width: 635, alt: "Flowchart: a new issue is fixed if it is reproducible, and closed otherwise") %>

  		




  
  377
  
    

  		




  
  378
  
    
    <p>A rendered diagram can be downloaded as a PNG image.</p>

  		




  
  379
  
    

  		




  348
  380
  
    
    <h2><a name="15" class="wiki-page"></a>Raw HTML</h2>

  		




  349
  381
  
    
    <p>You may use raw HTML for more complex formatting tasks, i.e. complex tables with cells spanning multiple rows or columns:</p>

  		












  

    
      app/views/help/wiki_syntax/common_mark/ja/wiki_syntax_common_mark.html.erb
    
  





  30
  30
  
    
</code></pre>

  		




  31
  31
  
    
</td></tr>

  		




  
  32
  
    
<tr><th colspan="3">Mermaidによる図 <span class="more_info">(<a href="<%= help_wiki_syntax_path(:detailed, anchor: "17") %>" target="_blank">詳細</a>)</span></th></tr>

  		




  
  33
  
    
<tr><th></th><td>```mermaid<br />flowchart LR<br />&nbsp;&nbsp;A[Start] --&gt; B[End]<br />```</td><td><%= image_tag("help/mermaid_flowchart_simple.png", width: 360, alt: "StartからEndへのフローチャート") %></td></tr>

  		




  
  34
  
    

  		




  32
  35
  
    
<tr><th colspan="3">改行と段落</th></tr>

  		




  33
  36
  
    
<tr><th></th><td>空行は<br><br>新しい段落を<br>作ります</td><td><p>空行は</p><p>新しい段落を作ります</p></td></tr>

  		




  34
  37
  
    
<tr><th></th><td>バックスラッシュで終わる行\<br>または半角スペース2個で改行を挿入します</td><td><p>バックスラッシュで終わる行<br>または空白2個で改行を挿入します</p></td></tr>

  		












  

    
      app/views/help/wiki_syntax/common_mark/ja/wiki_syntax_detailed_common_mark.html.erb
    
  





  26
  26
  
    
        </ul>

  		




  27
  27
  
    
        <li><a href='#12'>マクロ</a></li>

  		




  28
  28
  
    
        <li><a href='#13'>コードハイライト</a></li>

  		




  
  29
  
    
        <li><a href='#17'>Mermaidによる図</a></li>

  		




  29
  30
  
    
        <li><a href='#15'>HTMLを直接使用する</a></li>

  		




  30
  31
  
    
        <li><a href='#16'>アラートボックス</a></li>

  		




  31
  32
  
    
    </ul>

  		




  ......




  346
  347
  
    
<span class="k">end</span>

  		




  347
  348
  
    
</code></pre>

  		




  
  349
  
    
    <h2><a name="17" class="wiki-page"></a>Mermaidによる図</h2>

  		




  
  350
  
    

  		




  
  351
  
    
    <p>言語に <strong>mermaid</strong> を指定したコードブロックは、<a href="https://mermaid.js.org/" class="external">Mermaid.js</a> によってフローチャート・シーケンス図・ガントチャートなどの図として表示されます。利用できる図の種類と記法は <a href="https://mermaid.js.org/intro/syntax-reference.html" class="external">Mermaidの記法リファレンス</a> を参照してください。</p>

  		




  
  352
  
    

  		




  
  353
  
    
    <p>Mermaid.js はRedmineには同梱されておらず、管理者がインストールした場合にのみ図が表示されます。インストールされていない場合は通常のコードブロックとして表示されます。</p>

  		




  
  354
  
    

  		




  
  355
  
    
    <p>Wiki記法に対応している箇所であればどこでも以下の記述により図を描くことができます:</p>

  		




  
  356
  
    

  		




  
  357
  
    
<pre>

  		




  
  358
  
    
```mermaid

  		




  
  359
  
    
  Place your diagram definition here.

  		




  
  360
  
    
```

  		




  
  361
  
    
</pre>

  		




  
  362
  
    

  		




  
  363
  
    
    <p>表示例:</p>

  		




  
  364
  
    

  		




  
  365
  
    
<pre>

  		




  
  366
  
    
```mermaid

  		




  
  367
  
    
flowchart LR

  		




  
  368
  
    
  A[New issue] --&gt; B{Reproducible?}

  		




  
  369
  
    
  B --&gt;|Yes| C[Fix]

  		




  
  370
  
    
  B --&gt;|No| D[Close]

  		




  
  371
  
    
```

  		




  
  372
  
    
</pre>

  		




  
  373
  
    

  		




  
  374
  
    
    <p>以下のようになります</p>

  		




  
  375
  
    

  		




  
  376
  
    
<%= image_tag("help/mermaid_flowchart_decision.png", width: 635, alt: "New issueがReproducible?ならFix、そうでなければCloseに進むフローチャート") %>

  		




  
  377
  
    

  		




  
  378
  
    
    <p>表示された図はPNG画像としてダウンロードできます。</p>

  		




  
  379
  
    

  		




  348
  380
  
    
    <h2><a name="15" class="wiki-page"></a>HTMLを直接使用する</h2>

  		




  349
  381
  
    
    <p>複数の行や列がが結合している表のような複雑なフォーマットを記述したいときはMarkdown記法を使わずHTMLを直接書くこともできます。</p>

  		












  

    
      app/views/help/wiki_syntax/textile/en/wiki_syntax_detailed_textile.html.erb
    
  





  27
  27
  
    
        </ul>

  		




  28
  28
  
    
        <li><a href='#12'>Macros</a></li>

  		




  29
  29
  
    
        <li><a href='#13'>Code highlighting</a></li>

  		




  
  30
  
    
        <li><a href='#15'>Mermaid diagrams</a></li>

  		




  30
  31
  
    
    </ul>

  		




  31
  32
  
    
    <h2><a name="2" class="wiki-page"></a>Links</h2>

  		




  ......




  351
  352
  
    
  <span class="k">end</span>

  		




  352
  353
  
    
<span class="k">end</span>

  		




  353
  354
  
    
</code></pre>

  		




  
  355
  
    

  		




  
  356
  
    
    <h2><a name="15" class="wiki-page"></a>Mermaid diagrams</h2>

  		




  
  357
  
    

  		




  
  358
  
    
    <p>Code blocks written in the <strong>mermaid</strong> language are rendered as diagrams, such as flowcharts, sequence diagrams and Gantt charts, by <a href="https://mermaid.js.org/" class="external">Mermaid.js</a>. Please refer to the <a href="https://mermaid.js.org/intro/syntax-reference.html" class="external">Mermaid syntax reference</a> for the available diagrams and their syntax.</p>

  		




  
  359
  
    

  		




  
  360
  
    
    <p>Mermaid.js is not bundled with Redmine, and diagrams are rendered only if the administrator has installed it. Otherwise, the code is displayed as a plain code block.</p>

  		




  
  361
  
    

  		




  
  362
  
    
    <p>You can draw a diagram at any place that supports wiki formatting using this syntax:</p>

  		




  
  363
  
    

  		




  
  364
  
    
<pre>

  		




  
  365
  
    
&lt;pre&gt;&lt;code class="mermaid"&gt;

  		




  
  366
  
    
  Place your diagram definition here.

  		




  
  367
  
    
&lt;/code&gt;&lt;/pre&gt;

  		




  
  368
  
    
</pre>

  		




  
  369
  
    

  		




  
  370
  
    
    <p>Example:</p>

  		




  
  371
  
    

  		




  
  372
  
    
<pre>

  		




  
  373
  
    
&lt;pre&gt;&lt;code class="mermaid"&gt;

  		




  
  374
  
    
flowchart LR

  		




  
  375
  
    
  A[New issue] --&gt; B{Reproducible?}

  		




  
  376
  
    
  B --&gt;|Yes| C[Fix]

  		




  
  377
  
    
  B --&gt;|No| D[Close]

  		




  
  378
  
    
&lt;/code&gt;&lt;/pre&gt;

  		




  
  379
  
    
</pre>

  		




  
  380
  
    

  		




  
  381
  
    
    <p>yields</p>

  		




  
  382
  
    

  		




  
  383
  
    
<%= image_tag("help/mermaid_flowchart_decision.png", width: 635, alt: "Flowchart: a new issue is fixed if it is reproducible, and closed otherwise") %>

  		




  
  384
  
    

  		




  
  385
  
    
    <p>A rendered diagram can be downloaded as a PNG image.</p>

  		




  354
  386
  
    
</body>

  		




  355
  387
  
    
</html>

  		












  

    
      app/views/help/wiki_syntax/textile/en/wiki_syntax_textile.html.erb
    
  





  32
  32
  
    
</code></pre>

  		




  33
  33
  
    
</td></tr>

  		




  
  34
  
    
<tr><th colspan="3">Mermaid diagrams <span class="more_info">(<a href="<%= help_wiki_syntax_path(:detailed, anchor: "15") %>" target="_blank">more</a>)</span></th></tr>

  		




  
  35
  
    
<tr><th></th><td>&lt;pre&gt;&lt;code class="mermaid"&gt;<br />flowchart LR<br />&nbsp;&nbsp;A[Start] --&gt; B[End]<br />&lt;/code&gt;&lt;/pre&gt;</td><td><%= image_tag("help/mermaid_flowchart_simple.png", width: 360, alt: "Flowchart from Start to End") %></td></tr>

  		




  
  36
  
    

  		




  34
  37
  
    
<tr><th colspan="3">Lists</th></tr>

  		




  35
  38
  
    
<tr><th><%= image_tag("jstoolbar/list.svg", { alt: "Unordered list" }) %></th><td>* Item 1<br />** Sub<br />* Item 2</td><td><ul><li>Item 1<ul><li>Sub</li></ul></li><li>Item 2</li></ul></td></tr>

  		




  36
  39
  
    
<tr><th><%= image_tag("jstoolbar/list-numbers.svg", { alt: "Ordered list" }) %></th><td># Item 1<br />## Sub<br /># Item 2</td><td><ol><li>Item 1<ol><li>Sub</li></ol></li><li>Item 2</li></ol></td></tr>

  		












  

    
      app/views/help/wiki_syntax/textile/ja/wiki_syntax_detailed_textile.html.erb
    
  





  27
  27
  
    
        </ul>

  		




  28
  28
  
    
        <li><a href='#12'>マクロ</a></li>

  		




  29
  29
  
    
        <li><a href='#13'>コードハイライト</a></li>

  		




  
  30
  
    
        <li><a href='#15'>Mermaidによる図</a></li>

  		




  30
  31
  
    
    </ul>

  		




  31
  32
  
    
    <h2><a name="2" class="wiki-page"></a>リンク</h2>

  		




  ......




  351
  352
  
    
  <span class="k">end</span>

  		




  352
  353
  
    
<span class="k">end</span>

  		




  353
  354
  
    
</code></pre>

  		




  
  355
  
    

  		




  
  356
  
    
    <h2><a name="15" class="wiki-page"></a>Mermaidによる図</h2>

  		




  
  357
  
    

  		




  
  358
  
    
    <p>言語に <strong>mermaid</strong> を指定したコードブロックは、<a href="https://mermaid.js.org/" class="external">Mermaid.js</a> によってフローチャート・シーケンス図・ガントチャートなどの図として表示されます。利用できる図の種類と記法は <a href="https://mermaid.js.org/intro/syntax-reference.html" class="external">Mermaidの記法リファレンス</a> を参照してください。</p>

  		




  
  359
  
    

  		




  
  360
  
    
    <p>Mermaid.js はRedmineには同梱されておらず、管理者がインストールした場合にのみ図が表示されます。インストールされていない場合は通常のコードブロックとして表示されます。</p>

  		




  
  361
  
    

  		




  
  362
  
    
    <p>Wiki記法に対応している箇所であればどこでも以下の記述により図を描くことができます:</p>

  		




  
  363
  
    

  		




  
  364
  
    
<pre>

  		




  
  365
  
    
&lt;pre&gt;&lt;code class="mermaid"&gt;

  		




  
  366
  
    
  Place your diagram definition here.

  		




  
  367
  
    
&lt;/code&gt;&lt;/pre&gt;

  		




  
  368
  
    
</pre>

  		




  
  369
  
    

  		




  
  370
  
    
    <p>表示例:</p>

  		




  
  371
  
    

  		




  
  372
  
    
<pre>

  		




  
  373
  
    
&lt;pre&gt;&lt;code class="mermaid"&gt;

  		




  
  374
  
    
flowchart LR

  		




  
  375
  
    
  A[New issue] --&gt; B{Reproducible?}

  		




  
  376
  
    
  B --&gt;|Yes| C[Fix]

  		




  
  377
  
    
  B --&gt;|No| D[Close]

  		




  
  378
  
    
&lt;/code&gt;&lt;/pre&gt;

  		




  
  379
  
    
</pre>

  		




  
  380
  
    

  		




  
  381
  
    
    <p>以下のようになります</p>

  		




  
  382
  
    

  		




  
  383
  
    
<%= image_tag("help/mermaid_flowchart_decision.png", width: 635, alt: "New issueがReproducible?ならFix、そうでなければCloseに進むフローチャート") %>

  		




  
  384
  
    

  		




  
  385
  
    
    <p>表示された図はPNG画像としてダウンロードできます。</p>

  		




  354
  386
  
    
</body>

  		




  355
  387
  
    
</html>

  		












  

    
      app/views/help/wiki_syntax/textile/ja/wiki_syntax_textile.html.erb
    
  





  32
  32
  
    
</code></pre>

  		




  33
  33
  
    
</td></tr>

  		




  
  34
  
    
<tr><th colspan="3">Mermaidによる図 <span class="more_info">(<a href="<%= help_wiki_syntax_path(:detailed, anchor: "15") %>" target="_blank">詳細</a>)</span></th></tr>

  		




  
  35
  
    
<tr><th></th><td>&lt;pre&gt;&lt;code class="mermaid"&gt;<br />flowchart LR<br />&nbsp;&nbsp;A[Start] --&gt; B[End]<br />&lt;/code&gt;&lt;/pre&gt;</td><td><%= image_tag("help/mermaid_flowchart_simple.png", width: 360, alt: "StartからEndへのフローチャート") %></td></tr>

  		




  
  36
  
    

  		




  34
  37
  
    
<tr><th colspan="3">リスト</th></tr>

  		




  35
  38
  
    
<tr><th><%= image_tag("jstoolbar/list.svg", { alt: "リスト" }) %></th><td>* 項目1<br />** 下位階層の項目<br />* 項目2</td><td><ul><li>項目1<ul><li>下位階層の項目</li></ul></li><li>項目2</li></ul></td></tr>

  		




  36
  39
  
    
<tr><th><%= image_tag("jstoolbar/list-numbers.svg", { alt: "順序付きリスト" }) %></th><td># 項目1<br />## 下位階層の項目<br /># 項目2</td><td><ol><li>項目1<ol><li>下位階層の項目</li></ol></li><li>項目2</li></ol></td></tr>

  		















  (1-1/2)