最終投稿日：2026年06月29日
そんな場合は、コントローラでmdファイルをhtmlに変換しちゃいましょう。 LaravelにはマークダウンファイルをHTMLに変換、更にはMermaidの描画にも対応しています。
以下を叩いてインストールします。（[composer.json]があるディレクトリで）
C:\～\hoge> composer require league/commonmark
./composer.json has been updated
Running composer update league/commonmark
Loading composer repositories with package information
Updating dependencies
Lock file operations: 0 installs, 1 update, 0 removals
～ 省略 ～
Found 22 security vulnerability advisories affecting 12 packages.
Run "composer audit" for a full list of advisories.
Using version ^2.8 for league/commonmark
C:\～\hoge>
use League\CommonMark\Environment\Environment;
use League\CommonMark\Extension\CommonMark\CommonMarkCoreExtension;
use League\CommonMark\Extension\Table\TableExtension;
use League\CommonMark\MarkdownConverter;
～ 省略 ～
public function test(Request $request) {
$path = resource_path('index.md');
if (!file_exists($path)) {
abort(404);
}
$markdown = file_get_contents($path);
// 非互換性吸収
$markdown = preg_replace_callback(
'/```mermaid\s*\n([\s\S]*?)```/m',
function ($matches) {
// 先頭・末尾の空行を除去（v11必須）
$code = trim($matches[1]);
return "<div class=\"mermaid\">\n{$code}\n</div>";
},
$markdown
);
// コンバーター初期化
$environment = new Environment([
'html_input' => 'allow',
'allow_unsafe_links' => false,
'max_nesting_level' => PHP_INT_MAX,
]);
// CommonMarkの基本機能
$environment->addExtension(new CommonMarkCoreExtension());
// テーブル対応
$environment->addExtension(new TableExtension());
$converter = new MarkdownConverter($environment);
$html = $converter->convert($markdown)->getContent();
return view('markdown', ['html' => $html]);
}
@extends('layouts.base')
@section('header')
@parent
@endsection
@section('content')
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<style>
.markdown-body {
font-size: 18px;
line-height: 1.5;
}
/** インラインコード（単行） */
.markdown-body code {
background-color: #aaa;
padding: 2px 4px;
border-radius: 4px;
font-size: 0.9em;
border: 1px solid #d0d7de;
}
/** インラインコード（複数行） */
.markdown-body pre code {
background: #555;
color: #fff;
border: 1px solid #d0d7de;
padding: 12px;
border-radius: 6px;
display: block;
}
/** テーブル用 */
.markdown-body table {
border-collapse: collapse;
width: 100%;
margin: 1.2em 0;
}
/** テーブル用 */
.markdown-body th,
.markdown-body td {
border: 1px solid #d0d7de;
padding: 6px 12px;
}
/** テーブル用 */
.markdown-body th {
background: #f6f8fa;
font-weight: 600;
}
/** フロー図を中央寄せ */
.markdown-body .mermaid {
display: flex;
justify-content: center;
}
</style>
<div class="markdown-body">
{!! $html !!}
</div>
<script>
mermaid.initialize({
startOnLoad: true,
theme: "default"
});
</script>
@endsection
「CSS」に関しても特に必須ではありません。
必須となるのは『mermaid.min.js』の呼び出しとなります。
それさえできれば、後はコントローラから渡された『$html』を表示するだけです。 次ページは、実際にマークダウンファイルをレンダリングした結果となります。
実はブラウザに入れた「Markdown Viewer Enhanced（MVE）」とLaravelでインストールした『Mermaid』の描画エンジンは別物です。
厳密に言うと『Mermaid 11系は、Markdownを捨てた』バージョンとなり、上手く図が表示されない場合は以下を確認して下さい。