web-dev-qa-db-ja.com

マークダウンで人魚のテーマを変更する

私は、コードの脇にあるマークダウンドキュメント内の基本的な図のレンダリングに人魚を使用しています。私は このオンラインエディター をプレビュー中に編集するのに役立ちました。これはテーマを変更することを提案します（defaultandforestworks）。

これをマークダウンドキュメントにコピーして貼り付けるときに、テーマを設定するにはどうすればよいですか？

markdownmermaid
9
RandomCoder

私はあなたと同じものを探していたので、調べて Mermaid source code を掘り下げた後、これらのコードスニペットを見つけることができました：

for (const themeName of ['default', 'forest', 'dark', 'neutral']) {
  themes[themeName] = require(`./themes/${themeName}/index.scss`)
}

そのため、エディターでテストした後、これらのテーマは正常に機能しています。

  • default
  • 森林
  • 闇
  • 中性

カスタムテーマを作成する場合は、ここでテーマを見つけることができます。 https://github.com/knsv/mermaid/tree/master/src/themes

Mermaid online editor にアクセスすると、テーマを上記のテーマに変更できます。

enter image description here

7
Federico Piazza

https://mermaidjs.github.io/breakingChanges.html によると、テーマはSVGのレンダリング時に埋め込まれ、現在マークダウンを使用するときのカスタムテーマ設定はサポートされていないようです。

4
terry0201

ドキュメントで詳細な stylesheet をコピーして変更し、変更するすべてのCSSプロパティの後に!importantを追加すると、マーメイドがインラインスタイルでSVGにコピーするよりも優先されます。理想とはほど遠いが、マーメイドが行うスタイルのコピーもそうではないので、これは「火と戦う」ソリューションである。

0
Asbjørn Ulsberg

Markdownから出力を生成するために何を使用するかわからない-私は MkDocs を Material と一緒に使用し、説明された here のようなMermaidサポートを追加しました。

試行錯誤の設定を行った後、CloudflareのCDNを使用すると、古いバージョンのMermaidJSを別のCSSに含めることができることがわかりました。このようにして、ニュートラルスタイルを使用して図をレンダリングすることができました。

markdown_extensions:
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_div_format

extra_css:
  - https://cdnjs.cloudflare.com/ajax/libs/mermaid/7.0.9/mermaid.neutral.css
extra_javascript:
  - https://cdnjs.cloudflare.com/ajax/libs/mermaid/7.0.9/mermaid.min.js
0
Bernd

私の知る限り、テーマを設定する唯一のチャンスは初期化です。

 mermaid.initialize({
      theme: 'forest',
      logLevel: 1,
      flowchart: { curve: 'linear' },
    });
0
Michael Weinberger