Docsify

Archive Menu

CakePHP2

Python3

最終投稿日：2026年06月29日

Docsify（ドクシファイ）

Docsifyとは？

Docsifyは2016年頃に中国の開発者《李青桅》によって公開されました。
当時は以下の様な状況でした。

MkDocs → Python 必須
GitBook → Node 必須
静的サイトジェネレーター → ビルドが重い

そこに「インストール不要でMarkdownをそのまま読めるドキュメントビューア」
という発想が非常に革新的でした。
Docsifyはビルド工程なし、HTML１枚で動くという特徴で一気に広まりました。

ちょっと開発環境にPythonは入れられないよって場合もあります。
そんな時はJSだけでMDファイル群をBook化できる『Docsify』が便利です。
ただし１つだけ注意点があります。

Docsifyは「http(s)～」環境でしか実行できません。
なのでクライアントに納品する場合、客先にサーバが必要となります。
または個々のPCにXAMPPをインストールして貰うとか。

ここまで読んで問題なしという方は、導入手順へ進んで下さい。

導入手順

○ ディレクトリ構造

[Docsify/]
           +----- [index.html]
           +----- [_sidebar.md]
           +----- [README.md]

上記の構造となります。
ディレクトリ『Docsify』の名前は任意ですが、その他は固定の名前です。

○ index.html

基本的にこのファイルが全てとなります。

index.html

<!DOCTYPE html>
    <html lang="ja">
        <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>ドキュメント</title>
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify@4/themes/vue.css">
        </head>
    <body>
        <div id="app">読み込み中...</div>
        
        <script>
            window.$docsify = {
                name: 'ドキュメント',
                loadSidebar: true,
                loadNavbar: true,
                subMaxLevel: 0,
                auto2top: true,
                search: false,
                markdown: {
                    renderer: {
                        code: function (code, lang) {
                            if (lang === 'mermaid') {
                                return '<div class="mermaid">' + code + '</div>';
                            }
                            return this.origin.code.apply(this, arguments);
                        }
                    }
                },
                plugins: [
                    function (hook, vm) {
                        hook.doneEach(function() {
                            mermaid.initialize({ startOnLoad: true });
                            mermaid.init(undefined, document.querySelectorAll('.mermaid'));
                        });
                    }
                ]
            };
        </script>
        
        <script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/docsify.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
        
        <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
        
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                mermaid.initialize({ startOnLoad: true });
            });
        </script>
    </body>
</html>

○ README.md

これはマークダウンファイルなので、お好きな内容として下さい。

○ _sidebar.md

これもマークダウンファイルですが、メニューファイルとなるのでサンプルを。

ポイント

- [**トップ**](README.md)
- [**詳細設計**](hoge.md)
- 📁 **フーズ**
- [**フロー図**](foos/foo.md)

見慣れないmdファイルもありますが、以下が構造です。

[Docsify/]
           +----- [index.html]
           +----- [_sidebar.md]
           +----- [README.md]
           +----- [hoge.md]
           +----- [foos/]
                           +----- [foo.md]

いかがでしたか？
特別なモジュールが一切不要で綺麗なBook化ができました。
当然ブラウザの拡張機能『Markdown Viewer Enhanced』も不要ですよ！