meimed使用(javascriptフローチャートガントチャートシーケンス図)

17186 ワード
js。
目次
  • メールは
    • を使用します.
  • meimaid構成
  • 簡単な例script方式は
    • を使用します.
  • render指定要素レンダリング
  • ローカル生成
  • cli
    • をインストールします.
  • エラー
    • 使用する
    ページにフローチャート、ガント図、シーケンス図を描くのに使います.マーメイドはd3.jsで描画したSVGパターンを使用しています.
    メール配置
    公式文書ではAPIは見られませんでしたが、プロファイルGitHubプロジェクトのソースコード./src/mermaidAPI.jsを参照することができます.初期化の方法
    mermaid.initialize({
      theme: 'forest',//default, forest, dark or neutral
      // themeCSS: '.node rect { fill: red; }',
      logLevel: 3,
      flowchart: { curve: 'linear' },
      gantt: { axisFormat: '%m/%d/%Y' },
      sequence: { actorMargin: 50 },
      // sequenceDiagram: { actorMargin: 300 } // deprecated
    });
    簡単な例スクリプトの使い方
    メードはすべてのclassがmeimmandのノードを選択して、内容を図形に翻訳します.
    
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <script src="https://cdn.bootcss.com/mermaid/8.0.0-rc.8/mermaid.min.js">script>
head>
<body>
    <div class="mermaid">
        sequenceDiagram A-->B: Works!
    div>
    <div class="firstTest mermaid">
       graph LR;
        A--  -->B;
        A-->C;
        B-->D;
        C-->D;
    div>
body>
html>
    レンダー指定要素レンダリング
    
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    
head>
<body>
    <div id="graphDiv" style="max-width:100px !important;">div>
    <script>
        document.onreadystatechange = function(){
            if(document.readyState === 'complete') addSvg()
        }
        function addSvg(){
            var insertSvg = function(svgCode, bindFunctions){
                document.querySelector("#graphDiv").innerHTML = svgCode;
            };
            var graphDefinition = 'graph TB
    a-->b'    ;
            var graph = mermaid.render('graphDiv', graphDefinition, insertSvg);
        }
        script>

body>
<script src="https://cdn.bootcss.com/mermaid/8.0.0-rc.8/mermaid.min.js">script>
html>
    ローカル生成
    メリー.cliはcliツールをインストールして、端末で使えます.
    インストールclinpm install -g mermaid.cliファイルinput.mmd
    graph TD
	A[Christmas] -->|Get money| B(Go shopping)
	B --> C{Let me think}
	C -->|One| D[Laptop]
	C -->|Two| E[iPhone]
	C -->|Three| F[fa:fa-car Car]

    mmdc -h //    
mmdc -i input.mmd //      input.mmd.svg
    結果
    Get money
    One
    私
    Thre
    Christmas
    Go shoping
    Let me think
    Laptop
    iPhone
    カール
    エラーを申し込むLauncher.launch (/usr/local/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/Launcher.js:119:15) UnhandledPromiseRejectionWarning Error: Chromium revision is not downloaded mermaid.cli/node_modules/puppeteer説明meimmadc.liのインストールパッケージの中にpppeteerに依存しています.できないならcnpmでインストールし直します.
    dvd中のルートのジャンプ方式
    【MyBatis】MyBatis自動生成コードのクエリ・ピット記