Project

General

Profile

Download (63.7 KB)

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

Go MAEDA, 2026-10-25 06:21

View differences:

app/assets/stylesheets/wiki_syntax.css
58 58 
}
59 59 
table td { background-color: var(--oc-gray-0); block-size: 2em; vertical-align: middle;}
60 60 
table td code { font-size: 1.2em; }
61 
table td img { max-width: 100%; }
61 62 
table td h1 { font-size: 1.8em; text-align: start; }
62 63 
table td h2 { font-size: 1.4em; text-align: start; }
63 64 
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 32 

  		




  
  33
  
    
<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>

  		




  
  34
  
    
<tr><th></th><td>```mermaid<br />flowchart TD<br />&nbsp;&nbsp;A[Start] --&gt; B[End]<br />```</td><td><%= image_tag("help/mermaid_flowchart_simple.png", width: 168, alt: "Flowchart from Start to End") %></td></tr>

  		




  
  35
  
    

  		




  33
  36
  
    
<tr><th colspan="3">Line breaks and Paragraphs</th></tr>

  		




  34
  37
  
    
<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>

  		




  35
  38
  
    
<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>

  		




  348
  349
  
    

  		




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

  		




  
  351
  
    

  		




  
  352
  
    
    <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.<% if Redmine::Mermaid.installed_version %> Please note that the reference describes the latest version of Mermaid.js, and some of the syntax described there may not be supported by the installed version, <%= Redmine::Mermaid.installed_version %>.<% end %></p>

  		




  
  353
  
    

  		




  
  354
  
    
    <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>

  		




  
  355
  
    

  		




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

  		




  
  357
  
    

  		




  
  358
  
    
<pre>

  		




  
  359
  
    
```mermaid

  		




  
  360
  
    
  Place your diagram definition here.

  		




  
  361
  
    
```

  		




  
  362
  
    
</pre>

  		




  
  363
  
    

  		




  
  364
  
    
    <p>Example:</p>

  		




  
  365
  
    

  		




  
  366
  
    
<pre>

  		




  
  367
  
    
```mermaid

  		




  
  368
  
    
flowchart LR

  		




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

  		




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

  		




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

  		




  
  372
  
    
```

  		




  
  373
  
    
</pre>

  		




  
  374
  
    

  		




  
  375
  
    
    <p>yields</p>

  		




  
  376
  
    

  		




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

  		




  
  378
  
    

  		




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

  		




  
  380
  
    

  		




  349
  381
  
    
    <h2><a name="15" class="wiki-page"></a>Raw HTML</h2>

  		




  350
  382
  
    

  		




  351
  383
  
    
    <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
  32
  
    

  		




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

  		




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

  		




  
  35
  
    

  		




  33
  36
  
    
<tr><th colspan="3">改行と段落</th></tr>

  		




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

  		




  35
  38
  
    
<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>

  		




  348
  349
  
    

  		




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

  		




  
  351
  
    

  		




  
  352
  
    
    <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> を参照してください。<% if Redmine::Mermaid.installed_version %>なお、記法リファレンスは最新バージョンのMermaid.jsについて書かれているため、記載されている記法の一部はインストールされているバージョン（<%= Redmine::Mermaid.installed_version %>）では使用できない場合があります。<% end %></p>

  		




  
  353
  
    

  		




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

  		




  
  355
  
    

  		




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

  		




  
  357
  
    

  		




  
  358
  
    
<pre>

  		




  
  359
  
    
```mermaid

  		




  
  360
  
    
  Place your diagram definition here.

  		




  
  361
  
    
```

  		




  
  362
  
    
</pre>

  		




  
  363
  
    

  		




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

  		




  
  365
  
    

  		




  
  366
  
    
<pre>

  		




  
  367
  
    
```mermaid

  		




  
  368
  
    
flowchart LR

  		




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

  		




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

  		




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

  		




  
  372
  
    
```

  		




  
  373
  
    
</pre>

  		




  
  374
  
    

  		




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

  		




  
  376
  
    

  		




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

  		




  
  378
  
    

  		




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

  		




  
  380
  
    

  		




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

  		




  350
  382
  
    

  		




  351
  383
  
    
    <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
  
    

  		




  32
  33
  
    
    <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.<% if Redmine::Mermaid.installed_version %> Please note that the reference describes the latest version of Mermaid.js, and some of the syntax described there may not be supported by the installed version, <%= Redmine::Mermaid.installed_version %>.<% end %></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
  34
  
    

  		




  
  35
  
    
<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>

  		




  
  36
  
    
<tr><th></th><td>&lt;pre&gt;&lt;code class="mermaid"&gt;<br />flowchart TD<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: 168, alt: "Flowchart from Start to End") %></td></tr>

  		




  
  37
  
    

  		




  35
  38
  
    
<tr><th colspan="3">Lists</th></tr>

  		




  36
  39
  
    
<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>

  		




  37
  40
  
    
<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
  
    

  		




  32
  33
  
    
    <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> を参照してください。<% if Redmine::Mermaid.installed_version %>なお、記法リファレンスは最新バージョンのMermaid.jsについて書かれているため、記載されている記法の一部はインストールされているバージョン（<%= Redmine::Mermaid.installed_version %>）では使用できない場合があります。<% end %></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
  34
  
    

  		




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

  		




  
  36
  
    
<tr><th></th><td>&lt;pre&gt;&lt;code class="mermaid"&gt;<br />flowchart TD<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: 168, alt: "StartからEndへのフローチャート") %></td></tr>

  		




  
  37
  
    

  		




  35
  38
  
    
<tr><th colspan="3">リスト</th></tr>

  		




  36
  39
  
    
<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>

  		




  37
  40
  
    
<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>

  		












  

    
      test/functional/help_controller_test.rb
    
  





  54
  54
  
    
    end

  		




  55
  55
  
    
  end

  		




  56
  56
  
    

  		




  
  57
  
    
  def test_get_help_wiki_syntax_detailed_should_show_installed_mermaid_version

  		




  
  58
  
    
    Redmine::Mermaid.stubs(:installed_version).returns('12.0.0')

  		




  
  59
  
    
    get :show_wiki_syntax, :params => {:type => 'detailed'}

  		




  
  60
  
    
    assert_response :success

  		




  
  61
  
    
    assert_select 'p', :text => /not be supported by the installed version, 12\.0\.0\./

  		




  
  62
  
    

  		




  
  63
  
    
    Redmine::Mermaid.stubs(:installed_version).returns(nil)

  		




  
  64
  
    
    get :show_wiki_syntax, :params => {:type => 'detailed'}

  		




  
  65
  
    
    assert_response :success

  		




  
  66
  
    
    assert_select 'p', :text => /installed version/, :count => 0

  		




  
  67
  
    
  end

  		




  
  68
  
    

  		




  57
  69
  
    
  def test_get_help_wiki_syntax_should_return_lang_if_available

  		




  58
  70
  
    
    user = User.find(2)

  		




  59
  71
  
    
    user.language = 'de'

  		















  (1-1/2)