"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["30165"],{65292:function(e,r,n){n.r(r),n.d(r,{metadata:()=>t,contentTitle:()=>u,default:()=>h,assets:()=>c,toc:()=>d,frontMatter:()=>l});var t=JSON.parse('{"id":"guides/markdown-features/diagrams","title":"Diagrams","description":"Writing diagrams with Mermaid","source":"@site/docs/guides/markdown-features/markdown-features-diagrams.mdx","sourceDirName":"guides/markdown-features","slug":"/markdown-features/diagrams","permalink":"/docs/markdown-features/diagrams","draft":false,"unlisted":false,"editUrl":"https://github.com/facebook/docusaurus/edit/main/website/docs/guides/markdown-features/markdown-features-diagrams.mdx","tags":[],"version":"current","lastUpdatedBy":"S\xe9bastien Lorber","lastUpdatedAt":1729598021000,"frontMatter":{"id":"diagrams","title":"Diagrams","description":"Writing diagrams with Mermaid","slug":"/markdown-features/diagrams"},"sidebar":"docs","previous":{"title":"Math Equations","permalink":"/docs/markdown-features/math-equations"},"next":{"title":"Head metadata","permalink":"/docs/markdown-features/head-metadata"}}'),a=n("24246"),i=n("80980"),o=n("15398"),s=n("58636");let l={id:"diagrams",title:"Diagrams",description:"Writing diagrams with Mermaid",slug:"/markdown-features/diagrams"},u="Diagrams",c={},d=[{value:"Installation",id:"installation",level:2},{value:"Usage",id:"usage",level:2},{value:"Theming",id:"theming",level:2},{value:"Mermaid Config",id:"configuration",level:2},{value:"Dynamic Mermaid Component",id:"component",level:2}];function m(e){let r={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",mermaid:"mermaid",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(r.header,{children:(0,a.jsx)(r.h1,{id:"diagrams",children:"Diagrams"})}),"\n",(0,a.jsxs)(r.p,{children:["Diagrams can be rendered using ",(0,a.jsx)(r.a,{href:"https://mermaid-js.github.io/mermaid/",children:"Mermaid"})," in a code block."]}),"\n",(0,a.jsx)(r.h2,{id:"installation",children:"Installation"}),"\n",(0,a.jsxs)(o.Z,{groupId:"npm2yarn",children:[(0,a.jsx)(s.Z,{value:"npm",children:(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-bash",children:"npm install --save @docusaurus/theme-mermaid\n"})})}),(0,a.jsx)(s.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-bash",children:"yarn add @docusaurus/theme-mermaid\n"})})}),(0,a.jsx)(s.Z,{value:"pnpm",label:"pnpm",children:(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-bash",children:"pnpm add @docusaurus/theme-mermaid\n"})})})]}),"\n",(0,a.jsxs)(r.p,{children:["Enable Mermaid functionality by adding plugin ",(0,a.jsx)(r.code,{children:"@docusaurus/theme-mermaid"})," and setting ",(0,a.jsx)(r.code,{children:"markdown.mermaid"})," to ",(0,a.jsx)(r.code,{children:"true"})," in your ",(0,a.jsx)(r.code,{children:"docusaurus.config.js"}),"."]}),"\n",(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n  markdown: {\n    mermaid: true,\n  },\n  themes: ['@docusaurus/theme-mermaid'],\n};\n"})}),"\n",(0,a.jsx)(r.h2,{id:"usage",children:"Usage"}),"\n",(0,a.jsxs)(r.p,{children:["Add a code block with language ",(0,a.jsx)(r.code,{children:"mermaid"}),":"]}),"\n",(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-md",metastring:'title="Example Mermaid diagram"',children:"```mermaid\ngraph TD;\n    A--\x3eB;\n    A--\x3eC;\n    B--\x3eD;\n    C--\x3eD;\n```\n"})}),"\n",(0,a.jsx)(r.mermaid,{value:"graph TD;\n    A--\x3eB;\n    A--\x3eC;\n    B--\x3eD;\n    C--\x3eD;"}),"\n",(0,a.jsxs)(r.p,{children:["See the ",(0,a.jsx)(r.a,{href:"https://mermaid-js.github.io/mermaid/#/./n00b-syntaxReference",children:"Mermaid syntax documentation"})," for more information on the Mermaid syntax."]}),"\n",(0,a.jsx)(r.h2,{id:"theming",children:"Theming"}),"\n",(0,a.jsxs)(r.p,{children:["The diagram dark and light themes can be changed by setting ",(0,a.jsx)(r.code,{children:"mermaid.theme"})," values in the ",(0,a.jsx)(r.code,{children:"themeConfig"})," in your ",(0,a.jsx)(r.code,{children:"docusaurus.config.js"}),". You can set themes for both light and dark mode."]}),"\n",(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n  themeConfig: {\n    mermaid: {\n      theme: {light: 'neutral', dark: 'forest'},\n    },\n  },\n};\n"})}),"\n",(0,a.jsxs)(r.p,{children:["See the ",(0,a.jsx)(r.a,{href:"https://mermaid-js.github.io/mermaid/#/theming",children:"Mermaid theme documentation"})," for more information on theming Mermaid diagrams."]}),"\n",(0,a.jsx)(r.h2,{id:"configuration",children:"Mermaid Config"}),"\n",(0,a.jsxs)(r.p,{children:["Options in ",(0,a.jsx)(r.code,{children:"mermaid.options"})," will be passed directly to ",(0,a.jsx)(r.code,{children:"mermaid.initialize"}),":"]}),"\n",(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n  themeConfig: {\n    mermaid: {\n      options: {\n        maxTextSize: 50,\n      },\n    },\n  },\n};\n"})}),"\n",(0,a.jsxs)(r.p,{children:["See the ",(0,a.jsx)(r.a,{href:"https://mermaid-js.github.io/mermaid/#/./Setup?id=configuration",children:"Mermaid config documentation"})," and the ",(0,a.jsx)(r.a,{href:"https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts",children:"Mermaid config types"})," for the available config options."]}),"\n",(0,a.jsx)(r.h2,{id:"component",children:"Dynamic Mermaid Component"}),"\n",(0,a.jsxs)(r.p,{children:["To generate dynamic diagrams, you can use the ",(0,a.jsx)(r.code,{children:"Mermaid"})," component:"]}),"\n",(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-mdx",metastring:'title="Example of dynamic Mermaid component"',children:"import Mermaid from '@theme/Mermaid';\n\n<Mermaid\n  value={`graph TD;\n    A--\x3eB;\n    A--\x3eC;\n    B--\x3eD;\n    C--\x3eD;`}\n/>\n"})})]})}function h(e={}){let{wrapper:r}={...(0,i.a)(),...e.components};return r?(0,a.jsx)(r,{...e,children:(0,a.jsx)(m,{...e})}):m(e)}},58636:function(e,r,n){n.d(r,{Z:()=>o});var t=n("24246");n("27378");var a=n("90496");let i="tabItem_pnkT";function o(e){var r=e.children,n=e.hidden,o=e.className;return(0,t.jsx)("div",{role:"tabpanel",className:(0,a.Z)(i,o),hidden:n,children:r})}},15398:function(e,r,n){n.d(r,{Z:()=>k});var t=n("24246"),a=n("27378"),i=n("90496"),o=n("54947"),s=n("3620"),l=n("844"),u=n("97486"),c=n("32263"),d=n("16971");function m(e,r){(null==r||r>e.length)&&(r=e.length);for(var n=0,t=Array(r);n<r;n++)t[n]=e[n];return t}function h(e,r){return function(e){if(Array.isArray(e))return e}(e)||function(e,r){var n,t,a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=a){var i=[],o=!0,s=!1;try{for(a=a.call(e);!(o=(n=a.next()).done)&&(i.push(n.value),!r||i.length!==r);o=!0);}catch(e){s=!0,t=e}finally{try{!o&&null!=a.return&&a.return()}finally{if(s)throw t}}return i}}(e,r)||function(e,r){if(e){if("string"==typeof e)return m(e,r);var n=Object.prototype.toString.call(e).slice(8,-1);if("Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return m(e,r)}}(e,r)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function f(e){var r,n;return null!==(n=null===(r=a.Children.toArray(e).filter(function(e){return"\n"!==e}).map(function(e){var r,n;if(!e||(0,a.isValidElement)(e)&&(r=e.props)&&(void 0===r?"undefined":(n=r)&&"undefined"!=typeof Symbol&&n.constructor===Symbol?"symbol":typeof n)=="object"&&"value"in r)return e;throw Error("Docusaurus error: Bad <Tabs> child <".concat("string"==typeof e.type?e.type:e.type.name,'>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.'))}))||void 0===r?void 0:r.filter(Boolean))&&void 0!==n?n:[]}function p(e){var r=e.value;return e.tabValues.some(function(e){return e.value===r})}var g=n("71607");let b="tabList_Qoir",v="tabItem_AQgk";function j(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{},t=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),t.forEach(function(r){var t,a,i;t=e,a=r,i=n[r],a in t?Object.defineProperty(t,a,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[a]=i})}return e}function y(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):(function(e,r){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n.push.apply(n,t)}return n})(Object(r)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}),e}function x(e){var r=e.className,n=e.block,a=e.selectedValue,s=e.selectValue,l=e.tabValues,u=[],c=(0,o.o5)().blockElementScrollPositionUntilNextRender,d=function(e){var r=e.currentTarget,n=l[u.indexOf(r)].value;n!==a&&(c(r),s(n))},m=function(e){var r=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":var n,t=u.indexOf(e.currentTarget)+1;r=null!==(n=u[t])&&void 0!==n?n:u[0];break;case"ArrowLeft":var a,i=u.indexOf(e.currentTarget)-1;r=null!==(a=u[i])&&void 0!==a?a:u[u.length-1]}null==r||r.focus()};return(0,t.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,i.Z)("tabs",{"tabs--block":n},r),children:l.map(function(e){var r=e.value,n=e.label,o=e.attributes;return(0,t.jsx)("li",y(j({role:"tab",tabIndex:a===r?0:-1,"aria-selected":a===r,ref:function(e){return u.push(e)},onKeyDown:m,onClick:d},o),{className:(0,i.Z)("tabs__item",v,null==o?void 0:o.className,{"tabs__item--active":a===r}),children:null!=n?n:r}),r)})})}function w(e){var r=e.lazy,n=e.children,o=e.selectedValue,s=(Array.isArray(n)?n:[n]).filter(Boolean);if(r){var l=s.find(function(e){return e.props.value===o});return l?(0,a.cloneElement)(l,{className:(0,i.Z)("margin-top--md",l.props.className)}):null}return(0,t.jsx)("div",{className:"margin-top--md",children:s.map(function(e,r){return(0,a.cloneElement)(e,{key:r,hidden:e.props.value!==o})})})}function O(e){var r=function(e){var r,n,t,i,o,m,g,b,v,j,y,x,w,O,k=e.defaultValue,S=e.queryString,D=e.groupId;var M=(n=(r=e).values,t=r.children,(0,a.useMemo)(function(){var e=null!=n?n:f(t).map(function(e){var r=e.props;return{value:r.value,label:r.label,attributes:r.attributes,default:r.default}});return!function(e){var r=(0,c.lx)(e,function(e,r){return e.value===r.value});if(r.length>0)throw Error('Docusaurus error: Duplicate values "'.concat(r.map(function(e){return e.value}).join(", "),'" found in <Tabs>. Every value needs to be unique.'))}(e),e},[n,t])),P=h((0,a.useState)(function(){return function(e){var r,n=e.defaultValue,t=e.tabValues;if(0===t.length)throw Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(n){if(!p({value:n,tabValues:t}))throw Error('Docusaurus error: The <Tabs> has a defaultValue "'.concat(n,'" but none of its children has the corresponding value. Available values are: ').concat(t.map(function(e){return e.value}).join(", "),". If you intend to show no default tab, use defaultValue={null} instead."));return n}var a=null!==(r=t.find(function(e){return e.default}))&&void 0!==r?r:t[0];if(!a)throw Error("Unexpected error: 0 tabValues");return a.value}({defaultValue:k,tabValues:M})}),2),C=P[0],T=P[1];var E=h((o=(i={queryString:void 0!==S&&S,groupId:D}).queryString,m=i.groupId,g=(0,s.k6)(),b=function(e){var r=e.queryString,n=void 0!==r&&r,t=e.groupId;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)throw Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return null!=t?t:null}({queryString:void 0!==o&&o,groupId:m}),[(0,u._X)(b),(0,a.useCallback)(function(e){if(!!b){var r,n,t=new URLSearchParams(g.location.search);t.set(b,e),g.replace((r=function(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{},t=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),t.forEach(function(r){var t,a,i;t=e,a=r,i=n[r],a in t?Object.defineProperty(t,a,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[a]=i})}return e}({},g.location),n=(n={search:t.toString()},n),Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(n)):(function(e,r){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n.push.apply(n,t)}return n})(Object(n)).forEach(function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(n,e))}),r))}},[b,g])]),2),N=E[0],A=E[1];var I=h((j=(v=({groupId:D}).groupId)?"docusaurus.tab.".concat(v):null,x=(y=h((0,d.Nk)(j),2))[0],w=y[1],[x,(0,a.useCallback)(function(e){if(!!j)w.set(e)},[j,w])]),2),V=I[0],Z=I[1];var q=p({value:O=null!=N?N:V,tabValues:M})?O:null;return(0,l.Z)(function(){q&&T(q)},[q]),{selectedValue:C,selectValue:(0,a.useCallback)(function(e){if(!p({value:e,tabValues:M}))throw Error("Can't select invalid tab value=".concat(e));T(e),A(e),Z(e)},[A,Z,M]),tabValues:M}}(e);return(0,t.jsxs)("div",{className:(0,i.Z)("tabs-container",b),children:[(0,t.jsx)(x,j({},r,e)),(0,t.jsx)(w,j({},r,e))]})}function k(e){var r=(0,g.Z)();return(0,t.jsx)(O,y(j({},e),{children:f(e.children)}),String(r))}},80980:function(e,r,n){n.d(r,{Z:function(){return s},a:function(){return o}});var t=n(27378);let a={},i=t.createContext(a);function o(e){let r=t.useContext(i);return t.useMemo(function(){return"function"==typeof e?e(r):{...r,...e}},[r,e])}function s(e){let r;return r=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:o(e.components),t.createElement(i.Provider,{value:r},e.children)}}}]);