CINXE.COM

<!DOCTYPE html> <html class="client-nojs vector-feature-language-in-header-disabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-disabled skin-theme-clientpref-day vector-toc-available" lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>Extension:Diagrams - MediaWiki</title> <script>(function(){var className="client-js vector-feature-language-in-header-disabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-disabled skin-theme-clientpref-day vector-toc-available";var cookie=document.cookie.match(/(?:^|; )mediawikiwikimwclientpreferences=([^;]+)/);if(cookie){cookie[1].split('%2C').forEach(function(pref){className=className.replace(new RegExp('(^| )'+pref.replace(/-clientpref-\w+$|[^\w-]+/g,'')+'-clientpref-\\w+( |$)'),'$1'+pref+'$2');});}document.documentElement.className=className;}());RLCONF={"wgBreakFrames":false,"wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""], "wgDefaultDateFormat":"dmy","wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgRequestId":"aa6530d3-3bc6-4fa3-827c-3f43d068f26d","wgCanonicalNamespace":"Extension","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":102,"wgPageName":"Extension:Diagrams","wgTitle":"Diagrams","wgCurRevisionId":6715451,"wgRevisionId":6715451,"wgArticleId":1034712,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["Extensions with master compatibility policy","Stable extensions","Tag extensions","Extensions supporting Composer","MIT licensed extensions","Extensions in GitHub version control","ParserFirstCallInit extensions","All extensions","GraphViz extensions","Graph extensions"],"wgPageViewLanguage":"en","wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"Extension:Diagrams","wgRelevantArticleId":1034712,"wgIsProbablyEditable": true,"wgRelevantPageIsProbablyEditable":true,"wgRestrictionEdit":[],"wgRestrictionMove":[],"wgNoticeProject":"mediawiki","wgCiteReferencePreviewsActive":true,"wgMediaViewerOnClick":true,"wgMediaViewerEnabledByDefault":true,"wgVisualEditor":{"pageLanguageCode":"en","pageLanguageDir":"ltr","pageVariantFallbacks":"en"},"wgMFDisplayWikibaseDescriptions":{"search":true,"watchlist":true,"tagline":false,"nearby":true},"wgWMESchemaEditAttemptStepOversample":false,"wgWMEPageLength":5000,"wgInternalRedirectTargetUrl":"/wiki/Extension:Diagrams","wgEditSubmitButtonLabelPublish":true,"wgULSPosition":"personal","wgULSisCompactLinksEnabled":true,"wgVector2022LanguageInHeader":false,"wgULSisLanguageSelectorEmpty":false,"wgWikibaseItemId":"Q84791451","wgCheckUserClientHintsHeadersJsApi":["brands","architecture","bitness","fullVersionList","mobile","model","platform","platformVersion"],"wgSiteNoticeId":"2.7"};RLSTATE={"ext.globalCssJs.user.styles":"ready","site.styles":"ready","user.styles":"ready", "ext.globalCssJs.user":"ready","user":"ready","user.options":"loading","ext.pygments":"ready","skins.vector.search.codex.styles":"ready","skins.vector.styles":"ready","skins.vector.icons":"ready","jquery.makeCollapsible.styles":"ready","ext.wikimediamessages.styles":"ready","ext.visualEditor.desktopArticleTarget.noscript":"ready","ext.uls.pt":"ready","wikibase.client.init":"ready","ext.wikimediaBadges":"ready","ext.dismissableSiteNotice.styles":"ready"};RLPAGEMODULES=["mediawiki.action.view.redirect","ext.pygments.view","site","mediawiki.page.ready","jquery.makeCollapsible","mediawiki.toc","skins.vector.js","ext.centralNotice.geoIP","ext.centralNotice.startUp","ext.urlShortener.toolbar","ext.centralauth.centralautologin","mmv.bootstrap","ext.visualEditor.desktopArticleTarget.init","ext.visualEditor.targetLoader","ext.echo.centralauth","ext.eventLogging","ext.wikimediaEvents","ext.navigationTiming","ext.uls.compactlinks","ext.uls.interface","wikibase.client.vector-2022", "ext.checkUser.clientHints","ext.dismissableSiteNotice"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.impl(function(){return["user.options@12s5i",function($,jQuery,require,module){mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"}); }];});});</script> <link rel="stylesheet" href="/w/load.php?lang=en&modules=ext.dismissableSiteNotice.styles%7Cext.pygments%2CwikimediaBadges%7Cext.uls.pt%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediamessages.styles%7Cjquery.makeCollapsible.styles%7Cskins.vector.icons%2Cstyles%7Cskins.vector.search.codex.styles%7Cwikibase.client.init&only=styles&skin=vector-2022"> <script async="" src="/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022"></script> <meta name="ResourceLoaderDynamicStyles" content=""> <link rel="stylesheet" href="/w/load.php?lang=en&modules=site.styles&only=styles&skin=vector-2022"> <meta name="generator" content="MediaWiki 1.44.0-wmf.8"> <meta name="referrer" content="origin"> <meta name="referrer" content="origin-when-cross-origin"> <meta name="robots" content="max-image-preview:standard"> <meta name="format-detection" content="telephone=no"> <meta property="og:image" content="https://upload.wikimedia.org/wikipedia/mediawiki/8/8d/GraphViz_Logo.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="790"> <meta property="og:image" content="https://upload.wikimedia.org/wikipedia/mediawiki/8/8d/GraphViz_Logo.png"> <meta property="og:image:width" content="800"> <meta property="og:image:height" content="527"> <meta property="og:image:width" content="640"> <meta property="og:image:height" content="421"> <meta name="viewport" content="width=1120"> <meta property="og:site_name" content="MediaWiki"> <meta property="og:title" content="Extension:Diagrams - MediaWiki"> <meta property="og:type" content="website"> <link rel="preconnect" href="//upload.wikimedia.org"> <link rel="alternate" media="only screen and (max-width: 640px)" href="//m.mediawiki.org/wiki/Extension:Diagrams"> <link rel="alternate" type="application/x-wiki" title="Edit" href="/w/index.php?title=Extension:Diagrams&action=edit"> <link rel="apple-touch-icon" href="/static/apple-touch/mediawiki.png"> <link rel="icon" href="/static/favicon/mediawiki.ico"> <link rel="search" type="application/opensearchdescription+xml" href="/w/rest.php/v1/search" title="MediaWiki (en)"> <link rel="EditURI" type="application/rsd+xml" href="//www.mediawiki.org/w/api.php?action=rsd"> <link rel="canonical" href="https://www.mediawiki.org/wiki/Extension:Diagrams"> <link rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/"> <link rel="alternate" type="application/atom+xml" title="MediaWiki Atom feed" href="/w/index.php?title=Special:RecentChanges&feed=atom"> <link rel="dns-prefetch" href="//meta.wikimedia.org" /> <link rel="dns-prefetch" href="login.wikimedia.org"> </head> <body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-102 ns-subject mw-editable page-Extension_Diagrams rootpage-Extension_Diagrams skin-vector-2022 action-view"><a class="mw-jump-link" href="#bodyContent">Jump to content</a> <div class="vector-header-container"> <header class="vector-header mw-header"> <div class="vector-header-start"> <nav class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-dropdown" class="vector-dropdown vector-main-menu-dropdown vector-button-flush-left vector-button-flush-right" > <input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox " aria-label="Main menu" > <label id="vector-main-menu-dropdown-label" for="vector-main-menu-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-menu mw-ui-icon-wikimedia-menu"></span> <span class="vector-dropdown-label-text">Main menu</span> </label> <div class="vector-dropdown-content"> <div id="vector-main-menu-unpinned-container" class="vector-unpinned-container"> <div id="vector-main-menu" class="vector-main-menu vector-pinnable-element"> <div class="vector-pinnable-header vector-main-menu-pinnable-header vector-pinnable-header-unpinned" data-feature-name="main-menu-pinned" data-pinnable-element-id="vector-main-menu" data-pinned-container-id="vector-main-menu-pinned-container" data-unpinned-container-id="vector-main-menu-unpinned-container" > <div class="vector-pinnable-header-label">Main menu</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-main-menu.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-main-menu.unpin">hide</button> </div> <div id="p-navigation" class="vector-menu mw-portlet mw-portlet-navigation" > <div class="vector-menu-heading"> Navigation </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mainpage-description" class="mw-list-item"><a href="/wiki/MediaWiki" title="Visit the main page [z]" accesskey="z"><span>Main page</span></a></li><li id="n-mw-download" class="mw-list-item"><a href="/wiki/Download"><span>Get MediaWiki</span></a></li><li id="n-mw-extensions" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Category:Extensions"><span>Get extensions</span></a></li><li id="n-blog-text" class="mw-list-item"><a href="https://techblog.wikimedia.org/"><span>Tech blog</span></a></li><li id="n-mw-contribute" class="mw-list-item"><a href="/wiki/Special:MyLanguage/How_to_contribute"><span>Contribute</span></a></li> </ul> </div> </div> <div id="p-support" class="vector-menu mw-portlet mw-portlet-support" > <div class="vector-menu-heading"> Support </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-help" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Help:Contents" title="The place to find out"><span>User help</span></a></li><li id="n-mw-faq" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Manual:FAQ"><span>FAQ</span></a></li><li id="n-mw-manual" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Manual:Contents"><span>Technical manual</span></a></li><li id="n-mw-supportdesk" class="mw-list-item"><a href="/wiki/Project:Support_desk"><span>Support desk</span></a></li><li id="n-mw-communication" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Communication"><span>Communication</span></a></li> </ul> </div> </div> <div id="p-development" class="vector-menu mw-portlet mw-portlet-development" > <div class="vector-menu-heading"> Development </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mw-developerportal" class="mw-list-item"><a href="https://developer.wikimedia.org/"><span>Developer portal</span></a></li><li id="n-svn-statistics" class="mw-list-item"><a href="/wiki/Development_statistics"><span>Code statistics</span></a></li> </ul> </div> </div> <div id="p-mediawiki.org" class="vector-menu mw-portlet mw-portlet-mediawiki_org" > <div class="vector-menu-heading"> mediawiki.org </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-portal" class="mw-list-item"><a href="/wiki/Project:Help" title="About the project, what you can do, where to find things"><span>Community portal</span></a></li><li id="n-recentchanges" class="mw-list-item"><a href="/wiki/Special:RecentChanges" title="A list of recent changes in the wiki [r]" accesskey="r"><span>Recent changes</span></a></li><li id="n-mw-translate" class="mw-list-item"><a href="/wiki/Special:LanguageStats"><span>Translate content</span></a></li><li id="n-randompage" class="mw-list-item"><a href="/wiki/Special:Random" title="Load a random page [x]" accesskey="x"><span>Random page</span></a></li><li id="n-mw-discussion" class="mw-list-item"><a href="/wiki/Project:Village_Pump"><span>Village pump</span></a></li><li id="n-Sandboxlink-portlet-label" class="mw-list-item"><a href="/wiki/Project:Sandbox"><span>Sandbox</span></a></li> </ul> </div> </div> <div id="p-lang" class="vector-menu mw-portlet mw-portlet-lang" > <div class="vector-menu-heading"> In other languages </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> <div class="after-portlet after-portlet-lang"><span class="wb-langlinks-add wb-langlinks-link"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q84791451#sitelinks-wikipedia" title="Add interlanguage links" class="wbc-editpage">Add links</a></span></div> </div> </div> </div> </div> </div> </div> </nav> <a href="/wiki/MediaWiki" class="mw-logo"> <img class="mw-logo-icon" src="/static/images/icons/mediawikiwiki.svg" alt="" aria-hidden="true" height="50" width="50"> <span class="mw-logo-container skin-invert"> <img class="mw-logo-wordmark" alt="MediaWiki" src="/static/images/mobile/copyright/mediawikiwiki-wordmark.svg" style="width: 7.5em; height: 1.125em;"> </span> </a> </div> <div class="vector-header-end"> <div id="p-search" role="search" class="vector-search-box-vue vector-search-box-collapses vector-search-box-show-thumbnail vector-search-box-auto-expand-width vector-search-box"> <a href="/wiki/Special:Search" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only search-toggle" title="Search MediaWiki [f]" accesskey="f"><span class="vector-icon mw-ui-icon-search mw-ui-icon-wikimedia-search"></span> <span>Search</span> </a> <div class="vector-typeahead-search-container"> <div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail cdx-typeahead-search--auto-expand-width"> <form action="/w/index.php" id="searchform" class="cdx-search-input cdx-search-input--has-end-button"> <div id="simpleSearch" class="cdx-search-input__input-wrapper" data-search-loc="header-moved"> <div class="cdx-text-input cdx-text-input--has-start-icon"> <input class="cdx-text-input__input" type="search" name="search" placeholder="Search MediaWiki" aria-label="Search MediaWiki" autocapitalize="sentences" title="Search MediaWiki [f]" accesskey="f" id="searchInput" > <span class="cdx-text-input__icon cdx-text-input__start-icon"></span> </div> <input type="hidden" name="title" value="Special:Search"> </div> <button class="cdx-button cdx-search-input__end-button">Search</button> </form> </div> </div> </div> <nav class="vector-user-links vector-user-links-wide" aria-label="Personal tools"> <div class="vector-user-links-main"> <div id="p-vector-user-menu-preferences" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-uls" class="mw-list-item active user-links-collapsible-item"><a data-mw="interface" href="#" class="uls-trigger cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet"><span class="vector-icon mw-ui-icon-wikimedia-language mw-ui-icon-wikimedia-wikimedia-language"></span> <span>English</span></a> </li> </ul> </div> </div> <div id="p-vector-user-menu-userpage" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-dropdown" class="vector-dropdown " title="Change the appearance of the page's font size, width, and color" > <input type="checkbox" id="vector-appearance-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-appearance-dropdown" class="vector-dropdown-checkbox " aria-label="Appearance" > <label id="vector-appearance-dropdown-label" for="vector-appearance-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-appearance mw-ui-icon-wikimedia-appearance"></span> <span class="vector-dropdown-label-text">Appearance</span> </label> <div class="vector-dropdown-content"> <div id="vector-appearance-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <div id="p-vector-user-menu-notifications" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-overflow" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="https://donate.wikimedia.org/?wmf_source=donate&wmf_medium=sidebar&wmf_campaign=www.mediawiki.org&uselang=en" class=""><span>Donate</span></a> </li> <li id="pt-createaccount-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:CreateAccount&returnto=Extension%3ADiagrams" title="You are encouraged to create an account and log in; however, it is not mandatory" class=""><span>Create account</span></a> </li> <li id="pt-login-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:UserLogin&returnto=Extension%3ADiagrams" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o" class=""><span>Log in</span></a> </li> </ul> </div> </div> </div> <div id="vector-user-links-dropdown" class="vector-dropdown vector-user-menu vector-button-flush-right vector-user-menu-logged-out" title="More options" > <input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox " aria-label="Personal tools" > <label id="vector-user-links-dropdown-label" for="vector-user-links-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-ellipsis mw-ui-icon-wikimedia-ellipsis"></span> <span class="vector-dropdown-label-text">Personal tools</span> </label> <div class="vector-dropdown-content"> <div id="p-personal" class="vector-menu mw-portlet mw-portlet-personal user-links-collapsible-item" title="User menu" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport" class="user-links-collapsible-item mw-list-item"><a href="https://donate.wikimedia.org/?wmf_source=donate&wmf_medium=sidebar&wmf_campaign=www.mediawiki.org&uselang=en"><span>Donate</span></a></li><li id="pt-createaccount" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:CreateAccount&returnto=Extension%3ADiagrams" title="You are encouraged to create an account and log in; however, it is not mandatory"><span class="vector-icon mw-ui-icon-userAdd mw-ui-icon-wikimedia-userAdd"></span> <span>Create account</span></a></li><li id="pt-login" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:UserLogin&returnto=Extension%3ADiagrams" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o"><span class="vector-icon mw-ui-icon-logIn mw-ui-icon-wikimedia-logIn"></span> <span>Log in</span></a></li> </ul> </div> </div> <div id="p-user-menu-anon-editor" class="vector-menu mw-portlet mw-portlet-user-menu-anon-editor" > <div class="vector-menu-heading"> Pages for logged out editors <a href="/wiki/Help:Introduction" aria-label="Learn more about editing"><span>learn more</span></a> </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-anoncontribs" class="mw-list-item"><a href="/wiki/Special:MyContributions" title="A list of edits made from this IP address [y]" accesskey="y"><span>Contributions</span></a></li><li id="pt-anontalk" class="mw-list-item"><a href="/wiki/Special:MyTalk" title="Discussion about edits from this IP address [n]" accesskey="n"><span>Talk</span></a></li> </ul> </div> </div> </div> </div> </nav> </div> </header> </div> <div class="mw-page-container"> <div class="mw-page-container-inner"> <div class="vector-sitenotice-container"> <div id="siteNotice"><div id="mw-dismissablenotice-anonplace"></div><script>(function(){var node=document.getElementById("mw-dismissablenotice-anonplace");if(node){node.outerHTML="\u003Cdiv class=\"mw-dismissable-notice\"\u003E\u003Cdiv class=\"mw-dismissable-notice-close\"\u003E[\u003Ca tabindex=\"0\" role=\"button\"\u003Edismiss\u003C/a\u003E]\u003C/div\u003E\u003Cdiv class=\"mw-dismissable-notice-body\"\u003E\u003C!-- CentralNotice --\u003E\u003Cdiv id=\"localNotice\" data-nosnippet=\"\"\u003E\u003Cdiv class=\"sitenotice\" lang=\"en\" dir=\"ltr\"\u003E\u003Ccenter\u003E\n\u003Cdiv style=\"width:100%;border-style:solid; border-width:2px; border-color:var(--color-placeholder, black); text-align:center; padding: 6px;\"\u003E🗳️🖥️ The Wikimedia Foundation \u003Ca href=\"/wiki/Special:MyLanguage/Developer_Satisfaction_Survey/December_2024/announcement\" title=\"Special:MyLanguage/Developer Satisfaction Survey/December 2024/announcement\"\u003EDecember 2024 Developer Satisfaction Survey\u003C/a\u003E is now live.\nThis survey is used to measure developer satisfaction, \u0026amp; determine where to invest resources in the future.\u003C/div\u003E\n\u003C/center\u003E\u003C/div\u003E\u003C/div\u003E\u003C/div\u003E\u003C/div\u003E";}}());</script></div> </div> <div class="vector-column-start"> <div class="vector-main-menu-container"> <div id="mw-navigation"> <nav id="mw-panel" class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-pinned-container" class="vector-pinned-container"> </div> </nav> </div> </div> <div class="vector-sticky-pinned-container"> <nav id="mw-panel-toc" aria-label="Contents" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark"> <div id="vector-toc-pinned-container" class="vector-pinned-container"> <div id="vector-toc" class="vector-toc vector-pinnable-element"> <div class="vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned" data-feature-name="toc-pinned" data-pinnable-element-id="vector-toc" > <h2 class="vector-pinnable-header-label">Contents</h2> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-toc.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-toc.unpin">hide</button> </div> <ul class="vector-toc-contents" id="mw-panel-toc-list"> <li id="toc-mw-content-text" class="vector-toc-list-item vector-toc-level-1"> <a href="#" class="vector-toc-link"> <div class="vector-toc-text">Beginning</div> </a> </li> <li id="toc-Installation" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Installation"> <div class="vector-toc-text"> <span class="vector-toc-numb">1</span> <span>Installation</span> </div> </a> <button aria-controls="toc-Installation-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle Installation subsection</span> </button> <ul id="toc-Installation-sublist" class="vector-toc-list"> <li id="toc-Optional_external_rendering" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Optional_external_rendering"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.1</span> <span>Optional external rendering</span> </div> </a> <ul id="toc-Optional_external_rendering-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Local_rendering_commands" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Local_rendering_commands"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.2</span> <span>Local rendering commands</span> </div> </a> <ul id="toc-Local_rendering_commands-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Usage" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Usage"> <div class="vector-toc-text"> <span class="vector-toc-numb">2</span> <span>Usage</span> </div> </a> <ul id="toc-Usage-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-See_also" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#See_also"> <div class="vector-toc-text"> <span class="vector-toc-numb">3</span> <span>See also</span> </div> </a> <ul id="toc-See_also-sublist" class="vector-toc-list"> </ul> </li> </ul> </div> </div> </nav> </div> </div> <div class="mw-content-container"> <main id="content" class="mw-body"> <header class="mw-body-header vector-page-titlebar"> <nav aria-label="Contents" class="vector-toc-landmark"> <div id="vector-page-titlebar-toc" class="vector-dropdown vector-page-titlebar-toc vector-button-flush-left" > <input type="checkbox" id="vector-page-titlebar-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-titlebar-toc" class="vector-dropdown-checkbox " aria-label="Toggle the table of contents" > <label id="vector-page-titlebar-toc-label" for="vector-page-titlebar-toc-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-listBullet mw-ui-icon-wikimedia-listBullet"></span> <span class="vector-dropdown-label-text">Toggle the table of contents</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-titlebar-toc-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-namespace">Extension</span><span class="mw-page-title-separator">:</span><span class="mw-page-title-main">Diagrams</span></h1> <div class="mw-indicators"> </div> </header> <div class="vector-page-toolbar"> <div class="vector-page-toolbar-container"> <div id="left-navigation"> <nav aria-label="Namespaces"> <div id="p-associated-pages" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-associated-pages" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-nstab-extension" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Extension:Diagrams" title="View the subject page [c]" accesskey="c"><span>Extension</span></a></li><li id="ca-talk" class="vector-tab-noicon mw-list-item"><a href="/wiki/Extension_talk:Diagrams" rel="discussion" title="Discussion about the content page [t]" accesskey="t"><span>Discussion</span></a></li> </ul> </div> </div> <div id="vector-variants-dropdown" class="vector-dropdown emptyPortlet" > <input type="checkbox" id="vector-variants-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-variants-dropdown" class="vector-dropdown-checkbox " aria-label="Change language variant" > <label id="vector-variants-dropdown-label" for="vector-variants-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">English</span> </label> <div class="vector-dropdown-content"> <div id="p-variants" class="vector-menu mw-portlet mw-portlet-variants emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </nav> </div> <div id="right-navigation" class="vector-collapsible"> <nav aria-label="Views"> <div id="p-views" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-views" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-view" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Extension:Diagrams"><span>Read</span></a></li><li id="ca-edit" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Extension:Diagrams&action=edit" title="Edit the source code of this page [e]" accesskey="e"><span>Edit</span></a></li><li id="ca-history" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Extension:Diagrams&action=history" title="Past revisions of this page [h]" accesskey="h"><span>View history</span></a></li> </ul> </div> </div> </nav> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-dropdown" class="vector-dropdown vector-page-tools-dropdown" > <input type="checkbox" id="vector-page-tools-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-tools-dropdown" class="vector-dropdown-checkbox " aria-label="Tools" > <label id="vector-page-tools-dropdown-label" for="vector-page-tools-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">Tools</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-tools-unpinned-container" class="vector-unpinned-container"> <div id="vector-page-tools" class="vector-page-tools vector-pinnable-element"> <div class="vector-pinnable-header vector-page-tools-pinnable-header vector-pinnable-header-unpinned" data-feature-name="page-tools-pinned" data-pinnable-element-id="vector-page-tools" data-pinned-container-id="vector-page-tools-pinned-container" data-unpinned-container-id="vector-page-tools-unpinned-container" > <div class="vector-pinnable-header-label">Tools</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-page-tools.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-page-tools.unpin">hide</button> </div> <div id="p-cactions" class="vector-menu mw-portlet mw-portlet-cactions emptyPortlet vector-has-collapsible-items" title="More options" > <div class="vector-menu-heading"> Actions </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-more-view" class="selected vector-more-collapsible-item mw-list-item"><a href="/wiki/Extension:Diagrams"><span>Read</span></a></li><li id="ca-more-edit" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Extension:Diagrams&action=edit" title="Edit the source code of this page [e]" accesskey="e"><span>Edit</span></a></li><li id="ca-more-history" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Extension:Diagrams&action=history"><span>View history</span></a></li> </ul> </div> </div> <div id="p-tb" class="vector-menu mw-portlet mw-portlet-tb" > <div class="vector-menu-heading"> General </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-whatlinkshere" class="mw-list-item"><a href="/wiki/Special:WhatLinksHere/Extension:Diagrams" title="A list of all wiki pages that link here [j]" accesskey="j"><span>What links here</span></a></li><li id="t-recentchangeslinked" class="mw-list-item"><a href="/wiki/Special:RecentChangesLinked/Extension:Diagrams" rel="nofollow" title="Recent changes in pages linked from this page [k]" accesskey="k"><span>Related changes</span></a></li><li id="t-upload" class="mw-list-item"><a href="//commons.wikimedia.org/wiki/Special:UploadWizard" title="Upload files [u]" accesskey="u"><span>Upload file</span></a></li><li id="t-specialpages" class="mw-list-item"><a href="/wiki/Special:SpecialPages" title="A list of all special pages [q]" accesskey="q"><span>Special pages</span></a></li><li id="t-permalink" class="mw-list-item"><a href="/w/index.php?title=Extension:Diagrams&oldid=6715451" title="Permanent link to this revision of this page"><span>Permanent link</span></a></li><li id="t-info" class="mw-list-item"><a href="/w/index.php?title=Extension:Diagrams&action=info" title="More information about this page"><span>Page information</span></a></li><li id="t-cite" class="mw-list-item"><a href="/w/index.php?title=Special:CiteThisPage&page=Extension%3ADiagrams&id=6715451&wpFormIdentifier=titleform" title="Information on how to cite this page"><span>Cite this page</span></a></li><li id="t-urlshortener" class="mw-list-item"><a href="/w/index.php?title=Special:UrlQ%C4%B1sald%C4%B1c%C4%B1s%C4%B1&url=https%3A%2F%2Fwww.mediawiki.org%2Fwiki%2FExtension%3ADiagrams"><span>Get shortened URL</span></a></li><li id="t-urlshortener-qrcode" class="mw-list-item"><a href="/w/index.php?title=Special:QrKodu&url=https%3A%2F%2Fwww.mediawiki.org%2Fwiki%2FExtension%3ADiagrams"><span>Download QR code</span></a></li> </ul> </div> </div> <div id="p-coll-print_export" class="vector-menu mw-portlet mw-portlet-coll-print_export" > <div class="vector-menu-heading"> Print/export </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="coll-create_a_book" class="mw-list-item"><a href="/w/index.php?title=Special:Book&bookcmd=book_creator&referer=Extension%3ADiagrams"><span>Create a book</span></a></li><li id="coll-download-as-rl" class="mw-list-item"><a href="/w/index.php?title=Special:DownloadAsPdf&page=Extension%3ADiagrams&action=show-download-screen"><span>Download as PDF</span></a></li><li id="t-print" class="mw-list-item"><a href="/w/index.php?title=Extension:Diagrams&printable=yes" title="Printable version of this page [p]" accesskey="p"><span>Printable version</span></a></li> </ul> </div> </div> <div id="p-wikibase-otherprojects" class="vector-menu mw-portlet mw-portlet-wikibase-otherprojects" > <div class="vector-menu-heading"> In other projects </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-wikibase" class="wb-otherproject-link wb-otherproject-wikibase-dataitem mw-list-item"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q84791451" title="Link to connected data repository item [g]" accesskey="g"><span>Wikidata item</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> </div> </div> </div> <div class="vector-column-end"> <div class="vector-sticky-pinned-container"> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-pinned-container" class="vector-pinned-container"> </div> </nav> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-pinned-container" class="vector-pinned-container"> <div id="vector-appearance" class="vector-appearance vector-pinnable-element"> <div class="vector-pinnable-header vector-appearance-pinnable-header vector-pinnable-header-pinned" data-feature-name="appearance-pinned" data-pinnable-element-id="vector-appearance" data-pinned-container-id="vector-appearance-pinned-container" data-unpinned-container-id="vector-appearance-unpinned-container" > <div class="vector-pinnable-header-label">Appearance</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-appearance.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-appearance.unpin">hide</button> </div> </div> </div> </nav> </div> </div> <div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container> <div class="vector-body-before-content"> <div id="siteSub" class="noprint">From mediawiki.org</div> </div> <div id="contentSub"><div id="mw-content-subtitle"></div></div> <div id="mw-content-text" class="mw-body-content"><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr"><style data-mw-deduplicate="TemplateStyles:r6651102">.mw-parser-output .infobox{box-sizing:border-box;border:2px solid var(--border-color-base,#a2a9b1);width:280px;border-collapse:collapse;border-spacing:0;background-color:white;color:#333;clear:right;float:right;margin:0 0 0.5em 0.5em}.mw-parser-output .infobox-rtl{clear:left;float:left;margin:0 0.5em 0.5em 0}.mw-parser-output .infobox th{text-align:left;padding:0.2em 0.5em;vertical-align:top}.mw-parser-output .infobox-rtl th{text-align:right}@media(max-width:719px){body.mediawiki .mw-parser-output .infobox{float:none;clear:both;width:100%;margin:0 0 .5em 0}}.mw-parser-output .infobox td{border:none;padding:0.2em 0.5em;vertical-align:top}.mw-parser-output .infobox-header{background-color:#a2a9b1;color:#FFF;text-align:left}.mw-parser-output .infobox-header a{color:#FFF}.mw-parser-output .infobox-header td,.mw-parser-output .infobox-header th{padding:0.5em 0.5em}.mw-parser-output .infobox-header img{padding:0 0.2em 0 0.5em}@media screen{html.skin-theme-clientpref-night .mw-parser-output .infobox{background-color:inherit;color:inherit}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .infobox{background-color:inherit;color:inherit}}</style><style data-mw-deduplicate="TemplateStyles:r5577029">.mw-parser-output .ext-infobox>tbody>tr>td:first-child{vertical-align:top}.mw-parser-output .ext-infobox>tbody>tr>td abbr{white-space:nowrap}.mw-parser-output .ext-infobox .mw-collapsible-header,.mw-parser-output .ext-infobox .mw-collapsible-toggle{font-weight:bold}.mw-parser-output .ext-infobox .mw-collapsible-content{margin-top:.2em;padding-top:.2em}.mw-parser-output .ext-infobox-header>th,.mw-parser-output .ext-infobox caption,.mw-parser-output .ext-infobox-image,.mw-parser-output .ext-infobox-translate{text-align:center}.mw-parser-output .ext-infobox-name{font-size:130%;line-height:100%}.mw-parser-output .ext-infobox-type{min-width:7em}</style><style data-mw-deduplicate="TemplateStyles:r6424453">.mw-parser-output .ext-status-unstable,.mw-parser-output .ext-status-unstable td{border-color:#d33}.mw-parser-output .ext-status-unstable .ext-infobox-header{background-color:#d33;color:#fff}.mw-parser-output .ext-status-unstable .ext-infobox-header a{color:#fff}.mw-parser-output .ext-status-experimental,.mw-parser-output .ext-status-experimental td{border-color:#ff4500}.mw-parser-output .ext-status-experimental .ext-infobox-header{background-color:#ff4500;color:#FFF}.mw-parser-output .ext-status-experimental .ext-infobox-header a{color:#FFF}.mw-parser-output .ext-status-beta,.mw-parser-output .ext-status-beta td{border-color:#fc3}.mw-parser-output .ext-status-beta .ext-infobox-header{color:#000;background-color:#fc3}.mw-parser-output .ext-status-beta .ext-infobox-header a{color:#000}.mw-parser-output .ext-status-stable,.mw-parser-output .ext-status-stable td{border-color:#00af89}.mw-parser-output .ext-status-stable .ext-infobox-header{background-color:#068468;color:#FFF}.mw-parser-output .ext-status-stable .ext-infobox-header a{color:#fff}.mw-parser-output .ext-status-unmaintained,.mw-parser-output .ext-status-unmaintained td{border-color:#ac6600}.mw-parser-output .ext-status-unmaintained .ext-infobox-header{background-color:#ac6600;color:#FFF}.mw-parser-output .ext-status-unmaintained .ext-infobox-header a{color:#fff}</style><table class="infobox infobox-ltr ext-infobox ext-status-stable"> <caption><b><a href="/wiki/Special:MyLanguage/Manual:Extensions" title="Special:MyLanguage/Manual:Extensions">MediaWiki extensions manual</a><span style="display:none"><a href="/wiki/Manual:Extensions" title="Manual:Extensions"> </a></span></b></caption> <tbody><tr class="infobox-header ext-infobox-header notheme"> <th colspan="2"><figure class="mw-halign-left" typeof="mw:File"><a href="/wiki/Special:MyLanguage/Template:Extension#Content" title="Special:MyLanguage/Template:Extension"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/1/1b/OOjs_UI_icon_advanced-invert.svg/40px-OOjs_UI_icon_advanced-invert.svg.png" decoding="async" width="40" height="40" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/1/1b/OOjs_UI_icon_advanced-invert.svg/60px-OOjs_UI_icon_advanced-invert.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/1/1b/OOjs_UI_icon_advanced-invert.svg/80px-OOjs_UI_icon_advanced-invert.svg.png 2x" data-file-width="20" data-file-height="20" /></a><figcaption></figcaption></figure> <span class="ext-infobox-name">Diagrams</span><br /> <a href="/wiki/Special:MyLanguage/Extension_status" title="Special:MyLanguage/Extension status">Release status:</a><span style="display:none"><a href="/wiki/Extension_status" title="Extension status"> </a></span> stable</th> </tr> <tr> <td colspan="2" class="ext-infobox-image"><span class="mw-default-size" typeof="mw:File"><a href="/wiki/File:GraphViz_Logo.png" class="mw-file-description" title="px"><img alt="px" src="//upload.wikimedia.org/wikipedia/mediawiki/8/8d/GraphViz_Logo.png" decoding="async" width="322" height="212" class="mw-file-element" data-file-width="322" data-file-height="212" /></a></span></td> </tr> <tr> <td class="ext-infobox-type"><b><a href="/wiki/Special:MyLanguage/Template:Extension#type" title="Special:MyLanguage/Template:Extension">Implementation</a><span style="display:none"><a href="/wiki/Template:Extension#type" title="Template:Extension"> </a></span></b></td> <td><a href="/wiki/Special:MyLanguage/Manual:Tag_extensions" title="Special:MyLanguage/Manual:Tag extensions">Tag</a><span style="display:none"><a href="/wiki/Manual:Tag_extensions" title="Manual:Tag extensions"> </a></span> </td></tr><tr> <td><b><a href="/wiki/Special:MyLanguage/Template:Extension#description" title="Special:MyLanguage/Template:Extension">Description</a><span style="display:none"><a href="/wiki/Template:Extension#description" title="Template:Extension"> </a></span></b></td> <td>Display various types of diagrams rendered from text within wiki pages.</td> </tr> <tr> <td><b><a href="/wiki/Special:MyLanguage/Template:Extension#username" title="Special:MyLanguage/Template:Extension">Author(s)</a><span style="display:none"><a href="/wiki/Template:Extension#username" title="Template:Extension"> </a></span></b></td> <td>Sam Wilson (<a href="/wiki/User:Samwilson" title="User:Samwilson">Samwilson</a><sup><a href="/wiki/User_talk:Samwilson" title="User talk:Samwilson">talk</a></sup>)</td> </tr> <tr> <td><b><a href="/wiki/Special:MyLanguage/Template:Extension#version" title="Special:MyLanguage/Template:Extension">Latest version</a><span style="display:none"><a href="/wiki/Template:Extension#version" title="Template:Extension"> </a></span></b></td> <td>0.14.0 (2024-08-27)</td> </tr> <tr> <td><b><a href="/wiki/Special:MyLanguage/Compatibility#mediawiki_extensions" title="Special:MyLanguage/Compatibility">Compatibility policy</a><span style="display:none"><a href="/wiki/Compatibility#mediawiki_extensions" title="Compatibility"> </a></span></b></td> <td>Master maintains backward compatibility.</td> </tr> <tr> <td><a href="/wiki/Special:MyLanguage/Template:Extension#mediawiki" title="Special:MyLanguage/Template:Extension"><b>MediaWiki</b></a><span style="display:none"><a href="/wiki/Template:Extension#mediawiki" title="Template:Extension"> </a></span></td> <td>>= 1.34.0, <= 1.42</td> </tr> <tr> <td><a href="/wiki/Special:MyLanguage/Template:Extension#needs-updatephp" title="Special:MyLanguage/Template:Extension"><abbr title="'php update.php' needed after installation"><b>Database changes</b></abbr></a><span style="display:none"><a href="/wiki/Template:Extension#needs-updatephp" title="Template:Extension"> </a></span></td> <td>No</td> </tr> <tr> <td><a href="/wiki/Special:MyLanguage/Composer" title="Special:MyLanguage/Composer"><abbr title="Supports 'Composer' for installation"><b>Composer</b></abbr></a><span style="display:none"><a href="/wiki/Composer" title="Composer"> </a></span></td> <td><a rel="nofollow" class="external text" href="https://packagist.org/packages/samwilson/diagrams">samwilson/diagrams</a></td> </tr> <tr> <td><b><a href="/wiki/Special:MyLanguage/Template:Extension#license" title="Special:MyLanguage/Template:Extension">License</a><span style="display:none"><a href="/wiki/Template:Extension#license" title="Template:Extension"> </a></span></b></td> <td><a rel="nofollow" class="external text" href="//opensource.org/licenses/mit-license.php">MIT License</a></td> </tr><tr> <td><b>Download</b></td> <td><div class="plainlinks" style="white-space: nowrap;"> <p>GitHub: </p> <ul><li><a rel="nofollow" class="external text" href="https://github.com/samwilson/diagrams-extension">project page</a></li> <li><a rel="nofollow" class="external text" href="https://github.com/samwilson/diagrams-extension.git">git repository URL</a> <sup>[<span></span><a href="/wiki/Special:MyLanguage/Gerrit" title="Special:MyLanguage/Gerrit">help</a><span style="display:none"><a href="/wiki/Gerrit" title="Gerrit"> </a></span>]</sup></li> <li><a rel="nofollow" class="external text" href="https://github.com/samwilson/diagrams-extension/commits">commit history</a><br /></li></ul> <p><small><i>Note:<br />No <a href="/wiki/Special:MyLanguage/Localisation#Translation_resources" title="Special:MyLanguage/Localisation">localisation</a> updates are<br />provided by <a href="/wiki/Special:MyLanguage/translatewiki.net" title="Special:MyLanguage/translatewiki.net">translatewiki.net</a><span style="display:none"><a href="/wiki/Translatewiki.net" title="Translatewiki.net"> </a></span>.</i></small> </p> </div><br /><a href="https://gerrit.wikimedia.org/g/mediawiki/extensions/Diagrams/%2B/HEAD/README" class="extiw" title="git:mediawiki/extensions/Diagrams/+/HEAD/README">README</a></td> </tr> <tr> <td class="mw-collapsible mw-collapsed" colspan="2"> <div class="mw-collapsible-header"><a href="/wiki/Special:MyLanguage/Template:Extension#parameters" title="Special:MyLanguage/Template:Extension">Parameters</a><span style="display:none"><a href="/wiki/Template:Extension#parameters" title="Template:Extension"> </a></span></div> <div class="mw-collapsible-content"> $wgDiagramsServiceUrl</div></td> </tr> <tr> <td class="mw-collapsible mw-collapsed" colspan="2"> <div class="mw-collapsible-header"><a href="/wiki/Special:MyLanguage/Template:Extension#tags" title="Special:MyLanguage/Template:Extension">Tags</a><span style="display:none"><a href="/wiki/Template:Extension#tags" title="Template:Extension"> </a></span></div> <div class="mw-collapsible-content"> <graphviz>, <mscgen>, and <uml></div></td> </tr> <tr> <td class="mw-collapsible mw-collapsed" colspan="2"> <div class="mw-collapsible-header"><a href="/wiki/Special:MyLanguage/Template:Extension#hook" title="Special:MyLanguage/Template:Extension">Hooks used</a><span style="display:none"><a href="/wiki/Template:Extension#hook" title="Template:Extension"> </a></span></div> <style data-mw-deduplicate="TemplateStyles:r6219282">.mw-parser-output .plainlist ul{line-height:inherit;list-style:none none;margin:0}.mw-parser-output .plainlist ul li{margin-bottom:0}</style><div class="plainlist mw-collapsible-content"><ul><li><a href="/wiki/Special:MyLanguage/Manual:Hooks/ParserFirstCallInit" title="Special:MyLanguage/Manual:Hooks/ParserFirstCallInit">ParserFirstCallInit</a><span style="display:none"><a href="/wiki/Manual:Hooks/ParserFirstCallInit" title="Manual:Hooks/ParserFirstCallInit"> </a></span></li></ul></div> </td> </tr> <tr class="mw-empty-elt"> </tr> </tbody></table> <p>The <b>Diagrams</b> extension displays GraphViz, Mscgen, PlantUML, and Mermaid diagrams in a wiki. It can be configured to use a small web service to render the images. </p><p>It replaces the <a href="/wiki/Special:MyLanguage/Extension:GraphViz" title="Special:MyLanguage/Extension:GraphViz">GraphViz</a><span style="display:none"><a href="/wiki/Extension:GraphViz" title="Extension:GraphViz"> </a></span>, <a href="/wiki/Special:MyLanguage/Extension:PlantUML" title="Special:MyLanguage/Extension:PlantUML">PlantUML</a><span style="display:none"><a href="/wiki/Extension:PlantUML" title="Extension:PlantUML"> </a></span>, and <a href="/wiki/Special:MyLanguage/Extension:Mermaid" title="Special:MyLanguage/Extension:Mermaid">Mermaid</a><span style="display:none"><a href="/wiki/Extension:Mermaid" title="Extension:Mermaid"> </a></span> extensions in some ways, but does not (yet) support all features of all of them. The original reason for creating a new extension was to not store the rendered images as wiki files (as the GraphViz extension did). Still, it has changed to become a general diagramming extension. </p> <meta property="mw:PageProp/toc" /> <div class="mw-heading mw-heading2"><h2 id="Installation">Installation</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Extension:Diagrams&action=edit&section=1" title="Edit section: Installation"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li><a rel="nofollow" class="external text" href="https://github.com/samwilson/diagrams-extension/releases">Download</a> and place the file(s) in a directory called <code>Diagrams</code> in your <code>extensions/</code> folder.</li> <li>Add the following code at the bottom of your <a href="/wiki/Special:MyLanguage/Manual:LocalSettings.php" title="Special:MyLanguage/Manual:LocalSettings.php">LocalSettings.php</a><span style="display:none"><a href="/wiki/Manual:LocalSettings.php" title="Manual:LocalSettings.php"> </a></span> file: <div class="mw-highlight mw-highlight-lang-php mw-content-ltr" dir="ltr"><pre><span></span><span class="nx">wfLoadExtension</span><span class="p">(</span> <span class="s1">'Diagrams'</span> <span class="p">);</span> </pre></div></li> <li><b>Rendering:</b> For formats other than Mermaid, and if you do not use the external rendering service (see below), you must install graphviz, mscgen and/or plantuml on the computer running the web server. For example, on Debian or Ubuntu systems, this can be done with:<div class="mw-highlight mw-highlight-lang-bash mw-content-ltr" dir="ltr"><pre><span></span>$<span class="w"> </span>sudo<span class="w"> </span>apt<span class="w"> </span>install<span class="w"> </span>graphviz<span class="w"> </span>mscgen<span class="w"> </span>plantuml </pre></div></li> <li><b>Private wikis:</b> if you are using <a href="/wiki/Special:MyLanguage/Manual:image_authorization" title="Special:MyLanguage/Manual:image authorization">image authorization</a> then you need to add the following to <a href="/wiki/Special:MyLanguage/Manual:LocalSettings.php" title="Special:MyLanguage/Manual:LocalSettings.php">LocalSettings.php</a>:<div class="mw-highlight mw-highlight-lang-php mw-content-ltr" dir="ltr"><pre><span></span><span class="nv">$wgUploadPath</span> <span class="o">=</span> <span class="s2">"</span><span class="si">$wgScriptPath</span><span class="s2">/img_auth.php"</span><span class="p">;</span> <span class="nv">$wgImgAuthUrlPathMap</span><span class="p">[</span><span class="s1">'/diagrams/'</span><span class="p">]</span> <span class="o">=</span> <span class="s1">'mwstore://local-backend/local-public/diagrams/'</span><span class="p">;</span> </pre></div></li> <li><span typeof="mw:File"><span><img alt="Yes" src="//upload.wikimedia.org/wikipedia/commons/thumb/f/f6/OOjs_UI_icon_check-constructive.svg/15px-OOjs_UI_icon_check-constructive.svg.png" decoding="async" width="15" height="15" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/f/f6/OOjs_UI_icon_check-constructive.svg/23px-OOjs_UI_icon_check-constructive.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/f/f6/OOjs_UI_icon_check-constructive.svg/30px-OOjs_UI_icon_check-constructive.svg.png 2x" data-file-width="20" data-file-height="20" /></span></span> <b>Done</b> – Navigate to <a href="/wiki/Special:Version" title="Special:Version">Special:Version</a> on your wiki to verify that the extension is successfully installed.</li></ul> <div class="mw-heading mw-heading3"><h3 id="Optional_external_rendering">Optional external rendering</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Extension:Diagrams&action=edit&section=2" title="Edit section: Optional external rendering"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>This extension can also be configured to generate the diagram files using an external rendering web service. This is useful if you do not want the rendered files to be stored in the wiki or have security requirements that make it more convenient to run the external rendering commands somewhere other than on the web server. </p><p>Earlier versions of this extension required this service, but since 0.4.0, it's been optional. </p><p>There are two implementations of the service: </p> <ol><li>A <a rel="nofollow" class="external text" href="https://github.com/samwilson/diagrams-service">PHP (Symfony) based service</a> – <a rel="nofollow" class="external text" href="https://github.com/samwilson/diagrams-service#installation">installation instructions</a></li> <li>A <a rel="nofollow" class="external text" href="https://github.com/BITPlan/diagrams">Python-based service</a> – <a rel="nofollow" class="external text" href="http://wiki.bitplan.com/index.php/Diagrams#Installation">installation instructions</a>, <a rel="nofollow" class="external text" href="https://diagrams.bitplan.com">demo</a></li></ol> <p>Once you have the servicing installed and running correctly, add the following to your "LocalSettings.php" file: </p> <div class="mw-highlight mw-highlight-lang-php mw-content-ltr" dir="ltr"><pre><span></span><span class="c1">// The URL at which you installed the Diagrams Service.</span> <span class="nv">$wgDiagramsServiceUrl</span> <span class="o">=</span> <span class="s1">'https://diagrams.example.com/subdir'</span><span class="p">;</span> </pre></div> <div class="mw-heading mw-heading3"><h3 id="Local_rendering_commands">Local rendering commands</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Extension:Diagrams&action=edit&section=3" title="Edit section: Local rendering commands"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>When using the local/internal rendering (i.e., the commands are run by the web server), it may be necessary to change the command run. This can be done with the <code>$wgDiagramsLocalCommands</code> array. The keys of this array are <code>mscgen</code>, <code>plantuml</code>, <code>dot</code>, <code>neato</code>, <code>fdp</code>, <code>sfdp</code>, <code>circo</code>, or <code>twopi</code>. </p><p>For example, to set a custom location for the PlantUML jar file: </p> <div class="mw-highlight mw-highlight-lang-php mw-content-ltr" dir="ltr"><pre><span></span><span class="nv">$wgDiagramsLocalCommands</span> <span class="o">=</span> <span class="p">[</span> <span class="s1">'plantuml'</span> <span class="o">=></span> <span class="s1">'/usr/bin/java -jar /usr/local/bin/plantuml-1.2024.6.jar'</span><span class="p">,</span> <span class="p">];</span> </pre></div> <div class="mw-heading mw-heading2"><h2 id="Usage">Usage</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Extension:Diagrams&action=edit&section=4" title="Edit section: Usage"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>This extension adds four tags: <code><graphviz></code>, <code><mscgen></code>, <code><uml></code>, and <code><mermaid></code>. </p> <div class="mw-heading mw-heading2"><h2 id="See_also">See also</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Extension:Diagrams&action=edit&section=5" title="Edit section: See also"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li><a href="/wiki/Special:MyLanguage/Diagram_extensions" title="Special:MyLanguage/Diagram extensions">Diagram extensions</a><span style="display:none"><a href="/wiki/Diagram_extensions" title="Diagram extensions"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Extension:External_Data/Local_programs#Tag_emulation_mode" title="Special:MyLanguage/Extension:External Data/Local programs">Extension:External Data/Local_programs#Tag emulation mode</a><span style="display:none"><a href="/wiki/Extension:External_Data/Local_programs#Tag_emulation_mode" title="Extension:External Data/Local programs"> </a></span></li></ul>    </div><noscript><img src="https://login.wikimedia.org/wiki/Special:CentralAutoLogin/start?useformat=desktop&type=1x1&usesul3=0" alt="" width="1" height="1" style="border: none; position: absolute;"></noscript> <div class="printfooter" data-nosnippet="">Retrieved from "<a dir="ltr" href="https://www.mediawiki.org/w/index.php?title=Extension:Diagrams&oldid=6715451">https://www.mediawiki.org/w/index.php?title=Extension:Diagrams&oldid=6715451</a>"</div></div> <div id="catlinks" class="catlinks" data-mw="interface"><div id="mw-normal-catlinks" class="mw-normal-catlinks"><a href="/wiki/Special:Categories" title="Special:Categories">Categories</a>: <ul><li><a href="/wiki/Category:Stable_extensions" title="Category:Stable extensions">Stable extensions</a></li><li><a href="/wiki/Category:Tag_extensions" title="Category:Tag extensions">Tag extensions</a></li><li><a href="/wiki/Category:Extensions_supporting_Composer" title="Category:Extensions supporting Composer">Extensions supporting Composer</a></li><li><a href="/wiki/Category:MIT_licensed_extensions" title="Category:MIT licensed extensions">MIT licensed extensions</a></li><li><a href="/wiki/Category:Extensions_in_GitHub_version_control" title="Category:Extensions in GitHub version control">Extensions in GitHub version control</a></li><li><a href="/wiki/Category:ParserFirstCallInit_extensions" title="Category:ParserFirstCallInit extensions">ParserFirstCallInit extensions</a></li><li><a href="/wiki/Category:All_extensions" title="Category:All extensions">All extensions</a></li><li><a href="/wiki/Category:GraphViz_extensions" title="Category:GraphViz extensions">GraphViz extensions</a></li><li><a href="/wiki/Category:Graph_extensions" title="Category:Graph extensions">Graph extensions</a></li></ul></div><div id="mw-hidden-catlinks" class="mw-hidden-catlinks mw-hidden-cats-hidden">Hidden category: <ul><li><a href="/wiki/Category:Extensions_with_master_compatibility_policy" title="Category:Extensions with master compatibility policy">Extensions with master compatibility policy</a></li></ul></div></div> </div> </main> </div> <div class="mw-footer-container"> <footer id="footer" class="mw-footer" > <ul id="footer-info"> <li id="footer-info-lastmod"> This page was last edited on 27 August 2024, at 12:15.</li> <li id="footer-info-copyright">Text is available under the <a rel="nofollow" class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">Creative Commons Attribution-ShareAlike License</a>; additional terms may apply. Text in <a class="external text" href="https://www.mediawiki.org/wiki/Special:MyLanguage/Help:Contents">the Help: namespace</a> is available under the <a rel="nofollow" class="external text" href="https://creativecommons.org/publicdomain/zero/1.0/">Creative Commons CC0 License</a>. By using this site, you agree to the <a class="external text" href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Terms_of_Use">Terms of Use</a> and <a class="external text" href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Privacy Policy</a>.</li> </ul> <ul id="footer-places"> <li id="footer-places-privacy"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Privacy policy</a></li> <li id="footer-places-about"><a href="/wiki/Project:About">About mediawiki.org</a></li> <li id="footer-places-disclaimers"><a href="/wiki/Project:General_disclaimer">Disclaimers</a></li> <li id="footer-places-wm-codeofconduct"><a href="https://www.mediawiki.org/wiki/Special:MyLanguage/Code_of_Conduct">Code of Conduct</a></li> <li id="footer-places-developers"><a href="https://developer.wikimedia.org">Developers</a></li> <li id="footer-places-statslink"><a href="https://stats.wikimedia.org/#/www.mediawiki.org">Statistics</a></li> <li id="footer-places-cookiestatement"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Cookie_statement">Cookie statement</a></li> <li id="footer-places-mobileview"><a href="//m.mediawiki.org/w/index.php?title=Extension:Diagrams&mobileaction=toggle_view_mobile" class="noprint stopMobileRedirectToggle">Mobile view</a></li> </ul> <ul id="footer-icons" class="noprint"> <li id="footer-copyrightico"><a href="https://wikimediafoundation.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/static/images/footer/wikimedia-button.svg" width="84" height="29" alt="Wikimedia Foundation" loading="lazy"></a></li> <li id="footer-poweredbyico"><a href="https://www.mediawiki.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/w/resources/assets/poweredby_mediawiki.svg" alt="Powered by MediaWiki" width="88" height="31" loading="lazy"></a></li> </ul> </footer> </div> </div> </div> <div class="vector-settings" id="p-dock-bottom"> <ul></ul> </div><script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgHostname":"mw-web.codfw.main-549b5bbb9c-fchdx","wgBackendResponseTime":592,"wgPageParseReport":{"limitreport":{"cputime":"0.328","walltime":"0.401","ppvisitednodes":{"value":2947,"limit":1000000},"postexpandincludesize":{"value":33559,"limit":2097152},"templateargumentsize":{"value":11579,"limit":2097152},"expansiondepth":{"value":17,"limit":100},"expensivefunctioncount":{"value":12,"limit":500},"unstrip-depth":{"value":0,"limit":20},"unstrip-size":{"value":5915,"limit":5000000},"entityaccesscount":{"value":0,"limit":400},"timingprofile":["100.00% 346.272 1 -total"," 88.77% 307.377 1 Template:Extension"," 28.66% 99.247 43 Template:Ll"," 21.08% 72.991 48 Template:Pagelang"," 19.74% 68.338 86 Template:Translatable"," 5.54% 19.197 1 Template:ExtensionInstall"," 5.21% 18.037 2 Template:Dir"," 2.52% 8.717 1 Template:GithubDownload"," 1.86% 6.429 1 Template:Done"," 1.71% 5.937 1 Template:Int"]},"scribunto":{"limitreport-timeusage":{"value":"0.168","limit":"10.000"},"limitreport-memusage":{"value":13167522,"limit":52428800}},"cachereport":{"origin":"mw-web.codfw.main-549b5bbb9c-fchdx","timestamp":"20241218223317","ttl":2592000,"transientcontent":false}}});});</script> </body> </html>