Ondine

Examples

167 playground samples, rendered by Ondine when the documentation builds. Select one to open its source in the playground.

flowchart1. subgraph Client
StorageServicesClienttokenWeb appLocal cacheAPI gatewayAuth serviceOrder serviceOrders DB
flowchart2. subgraph Client
StorageServicesClienttokenWeb appLocal cacheAPI gatewayAuth serviceOrder serviceOrders DB
flowchart3. subgraph subgraph1
subgraph2subgraph1topbottomtopbottomoutside
flowchart4. subgraph "One"
TwoOneedge labelBold edge labelThe catin the hatThe dog in the hogThe catin the hatThe dog in the hog
flowchart5. A-->B
Tooltip for a callbackAThis is a tooltip for a linkBTooltip for a callbackCThis is a tooltip for a linkD
flowchart6. A-->B
AOpen this in a new tabBCOpen this in a new tabDE
block1. columns 1
DB   DAA wide one in themiddleC
block2. blockArrowId<["Label"]>(right)
LabelLabelLabelLabelLabelLabelLabel
block3. columns 1
DB   DAA wide one in themiddleC
block4. id1 space id2
StartStop
block5. columns 3
FrontendBackendDiskDatabase
block6. columns 3
StartMake DecisionYesProcess ANoDoneProcess BDoneEnd
c41. title System Context diagram for Internet Banki…
System Context diagram for Internet Banking SystemBankBoundary0[ENTERPRISE]BankBoundary[ENTERPRISE]BankBoundary2[SYSTEM]BankBoundary3[boundary]«person»Banking Customer AA customer of the bank,with personal bankaccounts.«person»Banking Customer B«external person»Banking Customer Cdesc«person»Banking Customer DA customer of the bank,with personal bankaccounts.«system»Internet BankingSystemAllows customers to viewinformation about theirbank accounts, and makepayments.«external system db»Mainframe BankingSystemStores all of the corebanking informationabout customers,accounts, transactions,etc.«external system»E-mail systemThe internal MicrosoftExchange e-mail system.«system db»Banking System DDatabaseA system of the bank,with personal bankaccounts.«system»Banking System A«system»Banking System BA system of the bank,with personal bankaccounts. next line.«system queue»Banking SystemF QueueA system of thebank.«external systemqueue»Banking SystemG QueueA system of thebank, with personalbank accounts.UsesUsesSends e-mails[SMTP]Sendse-mails to
c42. title System Context diagram for Internet Banki…
System Context diagram for Internet Banking SystemBankBoundary0[ENTERPRISE]BankBoundary[ENTERPRISE]BankBoundary2[SYSTEM]BankBoundary3[boundary]«person»Banking Customer AA customer of the bank,with personal bankaccounts.«person»Banking Customer B«external person»Banking Customer Cdesc«person»Banking Customer DA customer of the bank,with personal bankaccounts.«system»Internet BankingSystemAllows customers to viewinformation about theirbank accounts, and makepayments.«external system db»Mainframe BankingSystemStores all of the corebanking informationabout customers,accounts, transactions,etc.«external system»E-mail systemThe internal MicrosoftExchange e-mail system.«system db»Banking System DDatabaseA system of the bank,with personal bankaccounts.«system»Banking System A«system»Banking System BA system of the bank,with personal bankaccounts. next line.«system queue»Banking SystemF QueueA system of thebank.«external systemqueue»Banking SystemG QueueA system of thebank, with personalbank accounts.UsesUsesSends e-mails[SMTP]Sendse-mails to
c43. title Container diagram for Internet Banking Sy…
Container diagram for Internet Banking SystemInternet Banking[CONTAINER]«external system»E-Mail SystemThe internal MicrosoftExchange system«person»CustomerA customer of the bank,with personal bankaccounts«external system»Mainframe BankingSystemStores all of the corebanking informationabout customers,accounts, transactions,etc.«container»Single-Page App[JavaScript, Angular]Provides all theInternet bankingfunctionality tocustomers via their webbrowser«external container»Mobile App[C#, Xamarin]Provides a limitedsubset of the Internetbanking functionality tocustomers via theirmobile device«container»Web Application[Java, Spring MVC]Delivers the staticcontent and the Internetbanking SPA«container db»Database[SQL Database]Stores user registrationinformation, hashed authcredentials, accesslogs, etc.«external container db»API Application[Java, Docker Container]Provides Internetbanking functionalityvia APIUses[HTTPS]Uses[HTTPS]UsesDeliversUses[async, JSON/HTTPS]Uses[async,JSON/HTTPS]Reads from andwrites to[sync, JDBC]Sendse-mails toSendse-mailsusing[sync,SMTP]Uses[sync/async,XML/HTTPS]
c44. title Component diagram for Internet Banking Sy…
Component diagram for Internet Banking System - API ApplicationAPI Application[CONTAINER]«container»Single PageApplication[javascript and angular]Provides all theinternet bankingfunctionality tocustomers via their webbrowser.«container»Mobile App[Xamarin]Provides a limitedsubset to the internetbanking functionality tocustomers via theirmobile device.«container db»Database[Relational DatabaseSchema]Stores user registrationinformation, hashedauthenticationcredentials, accesslogs, etc.«external system»Mainframe BankingSystemStores all of the corebanking informationabout customers,accounts, transactions,etc.«component»Sign In Controller[MVC Rest Controller]Allows users to sign into the internet bankingsystem«component»Accounts SummaryController[MVC Rest Controller]Provides customers witha summary of their bankaccounts«component»Security Component[Spring Bean]Provides functionalityrelated to singing in,changing passwords, etc.«component»Mainframe BankingSystem Facade[Spring Bean]A facade onto themainframe bankingsystem.UsesUsesRead & write to[JDBC]Uses[XML/HTTPS]Uses[JSON/HTTPS]Uses[JSON/HTTPS]Uses[JSON/HTTPS]Uses[JSON/HTTPS]
c45. title Dynamic diagram for Internet Banking Syst…
Dynamic diagram for Internet Banking System - API ApplicationAPI Application[CONTAINER]«container db»Database[Relational DatabaseSchema]Stores user registrationinformation, hashedauthenticationcredentials, accesslogs, etc.«container»Single-PageApplication[JavaScript and Angular]Provides all of theInternet bankingfunctionality tocustomers via their webbrowser.«component»Security Component[Spring Bean]Provides functionalityRelated to signing in,changing passwords, etc.«component»Sign In Controller[Spring MVC RestController]Allows users to sign into the Internet BankingSystem.1: Submitscredentials to[JSON/HTTPS]2: CallsisAuthenticated()on3: select * fromusers where username= ?[JDBC]
c46. title Deployment Diagram for Internet Banking S…
Deployment Diagram for Internet Banking System - LiveCustomer's mobile device[Apple IOS or Android]Customer's computer[Microsoft Windows or Apple macOS]Big Bank plc[Big Bank plc data center]Web Browser[Google Chrome, Mozilla Firefox,Apple Safari or Microsoft Edge]bigbank-api*** x8[Ubuntu 16.04 LTS]bigbank-web*** x4[Ubuntu 16.04 LTS]bigbank-db01[Ubuntu 16.04 LTS]bigbank-db02[Ubuntu 16.04 LTS]Apache Tomcat[Apache Tomcat 8.x]Apache Tomcat[Apache Tomcat 8.x]Oracle - Primary[Oracle 12c]Oracle - Secondary[Oracle 12c]«container»Mobile App[Xamarin]Provides a limitedsubset of the InternetBanking functionality tocustomers via theirmobile device.«container»Single PageApplication[JavaScript and Angular]Provides all of theInternet Bankingfunctionality tocustomers via their webbrowser.«container»API Application[Java and Spring MVC]Provides InternetBanking functionalityvia a JSON/HTTPS API.«container»Web Application[Java and Spring MVC]Delivers the staticcontent and the InternetBanking single pageapplication.«container db»Database[Relational DatabaseSchema]Stores user registrationinformation, hashedauthenticationcredentials, accesslogs, etc.«container db»Database[Relational DatabaseSchema]Stores user registrationinformation, hashedauthenticationcredentials, accesslogs, etc.Makes API calls to[json/HTTPS]Makes API calls to[json/HTTPS]Delivers to thecustomer's webbrowserReads from andwrites to[JDBC]Reads from andwrites to[JDBC]Replicatesdata to
class1. namespace Earth.Volcano.Summit {
EarthEarth.Volcano.SummitEarth.Volcano.SlopefeedsfeedsCrater+erupt()LavaFlow+buildLand()Hotspot+meltRock()
class2. Reef animal example
Reef animal exampleAnimal+int age+String name+isMammal()+migrate()Turtle+String shellColor+swim()+nest()Shark-int sizeInFeet-canHunt()Whale+bool is_humpback+sing()From Turtle till Whalecan swimcan divecan nest on beachescan live for decades
class3. Animal example
Animal exampleAnimal+int age+String gender+isMammal()+mate()Duck+String beakColor+swim()+quack()Fish-int sizeInFeet-canEat()Zebra+bool is_wild+run()From Duck till Zebracan flycan swimcan divecan help in debugging
class4. class Customer {
placescontainssettled by1*1*Customer+String name+String emailOrder+String id+Date placedAt+total() : MoneyLineItem+int quantity«interface»Payment+authorize() : bool
class5. namespace Platform {
PlatformAuthDatadelegatesdelegatesUserService+login()+logout()Repository+find()+save()Gateway+route()
class6. namespace Company.Engineering.Backend {
CompanyCompany.Engineering.BackendCompany.Engineering.BackendCompany.Engineering.FrontendCompany.Engineering.FrontendoverseesoverseesDeveloper+writeCode()Designer+createMockup()CEO+makeDecisions()
er1. CUSTOMER ||--o{ ORDER : places
placescontainsappears inCUSTOMERstringnamestringemailORDERintiddateplacedAtLINE_ITEMintquantityfloatpricePRODUCTstringskustringtitle
er2. CAR ||--o{ NAMED-DRIVER : allows
allowsismakesCARstringregistrationNumberPKstringmakestringmodelstring[]partsNAMED-DRIVERstringcarRegistrationNumberPK, FKstringdriverLicensePK, FKPERSONstringdriversLicensePKThe license #string(99)firstNameOnly 99 characters are allowedstringlastNamestringphoneUKintageMANUFACTURER
er3. direction TB
placescontainsCUSTOMERstringnamestringcustNumberstringsectorORDERintorderNumberstringdeliveryAddressLINE-ITEMstringproductCodeintquantityfloatpricePerUnit
er4. direction LR
placescontainsCUSTOMERstringnamestringcustNumberstringsectorORDERintorderNumberstringdeliveryAddressLINE-ITEMstringproductCodeintquantityfloatpricePerUnit
er5. subgraph title1
title2title3title1allowsCUSTOMERstringnamestringcustNumberstringsectorCARNAMED-DRIVERPERSONstringfirstNamestringlastNameintage
er6. CAR {
ownshasCARstringregistrationNumberstringmakestringmodelPERSONstringfirstNamestringlastNameintageHOUSE
eventmodeling1. timeframe 01 ui CartUI
UI/AutomationCommand/Read ModelEventsCartUIAddItemdescription: stringItemAddeddescription: string
eventmodeling2. tf 01 ui CartUI
UI/AutomationCommand/Read ModelEventsCartUIAddItemdescription: 'john'image: 'avatar_john'price: 20.4ItemAddeddescription: stringimage: stringprice: numberAddItemdescription: 'jack'image: 'avatar_jack'price: 12.5ItemAddeddescription: stringimage: stringprice: number
eventmodeling3. timeframe 01 ui CartUI
UI/AutomationCommand/Read ModelEventsCartUIAddItemdescription: 'john'image: 'avatar_john'price: 20.4ItemAddeddescription: stringimage: stringprice: numberAddItemdescription: 'jack'image: 'avatar_jack'price: 12.5ItemAddeddescription: stringimage: stringprice: number
eventmodeling4. tf 01 ui CartUI
UI/AutomationCommand/Read ModelEventsStream: ExternalStream: CartCartUIAddItemItemAddedInventoryChangedInventoryProcessorChangeInventoryInventoryChanged
eventmodeling5. timeframe 01 ui CartUI
UI/AutomationCommand/Read ModelEventsStream: ExternalStream: CartCartUIAddItemItemAddedInventoryChangedInventoryProcessorChangeInventoryInventoryChanged
eventmodeling6. rf 02 evt CartCreated
Command/Read ModelEventsCartCreatedItemAddedItemRemovedCartClearedCartUI
gantt1. title A Gantt Diagram
A Gantt DiagramA taskAnother taskTask in Anotheranother taskSectionAnother2014-01-052014-01-122014-01-192014-01-262014-02-022014-02-092014-02-16
gantt2. dateFormat YYYY-MM-DD
Adding GANTT diagram functionality to mermaidCompleted taskActive taskFuture taskFuture task2Completed task in the critical lineImplement parser and jisonCreate tests for parserFuture task in critical lineCreate tests for rendererAdd to mermaidFunctionality addedDescribe gantt syntaxAdd gantt diagram to demo pageAdd another diagram to demo pageDescribe gantt syntaxAdd gantt diagram to demo pageAdd another diagram to demo pageA sectionCritical tasksDocumentationLast section2014-01-072014-01-112014-01-152014-01-192014-01-232014-01-27
gantt3. title A Gantt Diagram
A Gantt DiagramA taskAnother taskAnother oneSection2014-01-052014-01-192014-02-022014-02-162014-03-02
gantt4. title A Gantt Diagram
A Gantt DiagramA taskAnother taskTask in Anotheranother taskSectionAnother2014-01-052014-01-122014-01-192014-01-262014-02-022014-02-092014-02-16
gantt5. title Git Issues - days since last update
Git Issues - days since last update71363495Issue19062Issue19401Issue193Issue7441Issue13000510152025303540455055606570
gantt6. title Timeline - Gantt Sampler
Timeline - Gantt Sampler7136945064Issue19062Issue19401Issue1300000510152025303500051015202530359
git1. commit
0-9e3779b1-3c6ef36ashabc3-78dde6c4-17156075-b54cda26-538453d8-8ff34739-2e2ac0e11-6a99b4412-08d12df14-454021515-e3779b1
git2. commit
git3. commit
mainhotfixdevelopfeatureBfeatureArelease0-9e3779b1-3c6ef36ashabc3-78dde6c4-17156075-b54cda26-538453d8-8ff34739-2e2ac0e11-6a99b4412-08d12df14-454021515-e3779b1
git4. commit
mainhotfixdevelopfeatureBfeatureArelease0-9e3779b1-3c6ef36ashabc3-78dde6c4-17156075-b54cda26-538453d8-8ff34739-2e2ac0e11-6a99b4412-08d12df14-454021515-e3779b1
git5. commit type:HIGHLIGHT
mainhotfixdevelopfeatureBfeatureArelease0-9e3779b1-3c6ef36ashabc3-78dde6c4-17156075-b54cda26-538453d8-8ff34739-2e2ac0e11-6a99b4412-08d12df14-454021515-e3779b1
git6. commit
mainhotfixdevelopfeatureBfeatureArelease0-9e3779b1-3c6ef36ashabc3-78dde6c4-17156075-b54cda26-538453d8-8ff34739-2e2ac0e11-6a99b4412-08d12df14-454021515-e3779b1
info1. info
Ondine v0.0.0
info2. info showInfo
Ondine v0.0.0
journey1. title My working day
My working day54321Go to workMake teaMeGo upstairsMeDo workMeCatGo homeGo downstairsMeSit downMeCatMe
kanban1. column1[Column Title]
Column Title1Task Description
kanban2. todo[Todo]
Todo1Update DatabaseFunctionMC-2037knsv
kanban3. Todo
Todo2CreateDocumentationCreate Blog aboutthe new diagramIn progress1Create renderer sothat it works inall cases. We alsoadd some extra texthere for testingpurposes. And somemore just for theextra flare.Ready for deploy1Design grammarknsvReady for test2Create parsingtestsMC-2038K.Sveidqvistlast itemknsvDone3define getDataTitle of diagram ismore than 100 charswhen userduplicates diagramwith 100 charMC-2036Update DB functionMC-2037knsvCan't reproduce1Weird flickering inFirefox
mindmap1. root((Hawaiʻi))
HistoryOld legendsVoyagingPolynesiannavigators whosailed by the starsNatureMountainsand volcanoesOcean lifeReefSea turtlesMonk sealsParrotfishCultureHula and leiʻUkuleleHawaiʻi
mindmap2. id1["`**Pele** is the
She lives in thecrater of Kīlauea...a very old storythat is still toldtodayLava builds new landPele is thegoddess of volcanoesUnicode works too:🌋
mindmap3. root((mindmap))
OriginsLong historyPopularizationBritish popularpsychology authorTony BuzanResearchOn effectivenessand featuresOn AutomaticcreationUsesCreative techniquesStrategic planningArgument mappingToolsPen and paperMermaidmindmap
mindmap4. Root
ABRoot
mindmap5. Root
ABCRoot
mindmap6. id1["`**Root** with
The dog in thehog... a very longtext that wraps to anew lineRegular labels stillworksRoot witha second lineUnicode works too:🤓
packet1. TCP Packet
Source PortDestination PortSequence NumberAcknowledgment NumberData OffsetReservedURGACKPSHRSTSYNFINWindowChecksumUrgent Pointer(Options and Padding)Data (variable length)Data (variable length)0151631326364959699100105106107108109110111112127128143144159160191192223224255TCP Packet
packet2. title UDP Packet
Source PortDestination PortLengthChecksumData (variable length)0151631324748636495UDP Packet
packet3. 0-7: "DATA"
DATATYPEENRESERVED70118121513
packet4. 0-15: "Source Port"
Source PortDestination PortSequence Number01516313263
pie1. "ʻAhi" : 386
Fish caught by the crew79%17%3%ʻAhiMahimahiOno
pie2. "Dogs" : 386
Pets adopted by volunteers79%17%3%DogsCatsRats
pie3. title Key elements in Product X
Key elements in Product X40%46%9%5%Calcium [42.96]Potassium [50.05]Magnesium [10.01]Iron [5]
quadrant1. title Reach and engagement of campaigns
Reach and engagement of campaignsWe should expandNeed to promoteRe-evaluateMay be improvedLow ReachHigh ReachLow EngagementHigh EngagementCampaign ACampaign BCampaign CCampaign DCampaign ECampaign F
quadrant2. x-axis Urgent --> Not Urgent
PlanDoDelegateDeleteUrgentNot UrgentNot ImportantImportant ❤
quadrant3. title Reach and engagement of campaigns
Reach and engagement of campaignsWe should expandNeed to promoteRe-evaluateMay be improvedLow ReachHigh ReachLow EngagementHigh EngagementCampaign ACampaign BCampaign CCampaign DCampaign ECampaign F
requirement1. requirement checkout_req {
«contains»«satisfies»«Requirement»checkout_reqID1TextOrders must be payableonline.RiskHighVerificationTest«Functional Requirement»payment_reqID1.1TextCard payments must beauthorized.RiskHighVerificationTest«Element»checkout_serviceTypeservice
requirement2. requirement checkout_req {
«contains»«satisfies»«Requirement»checkout_reqID1TextOrders must be payableonline.RiskHighVerificationTest«Functional Requirement»payment_reqID1.1TextCard payments must beauthorized.RiskHighVerificationTest«Element»checkout_serviceTypeservice
requirement3. requirement test_req {
«satisfies»«traces»«contains»«contains»«derives»«refines»«verifies»«copies»«Requirement»test_reqID1Textthe test text.RiskHighVerificationTest«Functional Requirement»test_req2ID1.1Textthe second test text.RiskLowVerificationInspection«Performance Requirement»test_req3ID1.2Textthe third test text.RiskMediumVerificationDemonstration«Interface Requirement»test_req4ID1.2.1Textthe fourth test text.RiskMediumVerificationAnalysis«Physical Requirement»test_req5ID1.2.2Textthe fifth test text.RiskMediumVerificationAnalysis«Design Constraint»test_req6ID1.2.3Textthe sixth test text.RiskMediumVerificationAnalysis«Element»test_entityTypesimulation«Element»test_entity2Typeword docDoc Refreqs/test_entity«Element»test_entity3Typetest suiteDoc Refgithub.com/all_the_tests
requirement4. requirement test_req {
«Requirement»test_reqID1Textstyling exampleRiskLowVerificationTest«Element»test_entityTypesimulation
requirement5. requirement test_req {
«Requirement»test_reqID1Textclass styling exampleRiskLowVerificationTest«Element»test_entityTypesimulation
requirement6. requirement test_req:::important {
«Requirement»test_reqID1Textclass styling exampleRiskLowVerificationTest«Element»test_entityTypesimulation
sankey1. Agricultural 'waste',Bio-conversion,124.729
Agricultural 'waste' → Bio-conversion: 124.73Bio-conversion → Liquid: 0.6Bio-conversion → Losses: 26.86Bio-conversion → Solid: 280.32Bio-conversion → Gas: 81.14Biofuel imports → Liquid: 35Biomass imports → Solid: 35Coal imports → Coal: 11.61Coal reserves → Coal: 63.97Coal → Solid: 75.57District heating → Industry: 10.64District heating → Heating and cooling - commercial: 22.51District heating → Heating and cooling - homes: 46.18Electricity grid → Over generation / exports: 104.45Electricity grid → Heating and cooling - homes: 113.73Electricity grid → H2 conversion: 27.14Electricity grid → Industry: 342.17Electricity grid → Road transport: 37.8Electricity grid → Agriculture: 4.41Electricity grid → Heating and cooling - commercial: 40.86Electricity grid → Losses: 56.69Electricity grid → Rail transport: 7.86Electricity grid → Lighting & appliances - commercial: 90.01Electricity grid → Lighting & appliances - homes: 93.49Gas imports → Ngas: 40.72Gas reserves → Ngas: 82.23Gas → Heating and cooling - commercial: 0.13Gas → Losses: 1.4Gas → Thermal generation: 151.89Gas → Agriculture: 2.1Gas → Industry: 48.58Geothermal → Electricity grid: 7.01H2 conversion → H2: 20.9H2 conversion → Losses: 6.24H2 → Road transport: 20.9Hydro → Electricity grid: 7Liquid → Industry: 121.07Liquid → International shipping: 128.69Liquid → Road transport: 135.84Liquid → Domestic aviation: 14.46Liquid → International aviation: 206.27Liquid → Agriculture: 3.64Liquid → National navigation: 33.22Liquid → Rail transport: 4.41Marine algae → Bio-conversion: 4.38Ngas → Gas: 122.95Nuclear → Thermal generation: 839.98Oil imports → Oil: 504.29Oil reserves → Oil: 107.7Oil → Liquid: 611.99Other waste → Solid: 56.59Other waste → Bio-conversion: 77.81Pumped heat → Heating and cooling - homes: 193.03Pumped heat → Heating and cooling - commercial: 70.67Solar PV → Electricity grid: 59.9Solar Thermal → Heating and cooling - homes: 19.26Solar → Solar Thermal: 19.26Solar → Solar PV: 59.9Solid → Agriculture: 0.88Solid → Thermal generation: 400.12Solid → Industry: 46.48Thermal generation → Electricity grid: 525.53Thermal generation → Losses: 787.13Thermal generation → District heating: 79.33Tidal → Electricity grid: 9.45UK land based bioenergy → Bio-conversion: 182.01Wave → Electricity grid: 19.01Wind → Electricity grid: 289.37Agricultural 'waste'Bio-conversionLiquidLossesSolidGasBiofuel importsBiomass importsCoal importsCoalCoal reservesDistrict heatingIndustryHeating and cooling - commercialHeating and cooling - homesElectricity gridOver generation / exportsH2 conversionRoad transportAgricultureRail transportLighting & appliances - commercialLighting & appliances - homesGas importsNgasGas reservesThermal generationGeothermalH2HydroInternational shippingDomestic aviationInternational aviationNational navigationMarine algaeNuclearOil importsOilOil reservesOther wastePumped heatSolar PVSolar ThermalSolarTidalUK land based bioenergyWaveWind
sankey2. Electricity grid,Over generation / exports,104.…
Electricity grid → Over generation / exports: 104.45Electricity grid → Heating and cooling - homes: 113.73Electricity grid → H2 conversion: 27.14Electricity grid 245.32Over generation / exports 104.45Heating and cooling - homes 113.73H2 conversion 27.14
sankey3. Pumped heat,"Heating and cooling, ""homes""",19…
Pumped heat → Heating and cooling, "homes": 193.03Pumped heat → Heating and cooling, "commercial": 70.67Pumped heat 263.7Heating and cooling, "homes" 193.03Heating and cooling, "commercial" 70.67
sankey4. Electricity grid,Heating and cooling - homes,11…
Electricity grid → Heating and cooling - homes: 113.73Electricity grid → Industry: 342.17Electricity grid → Losses: 56.69Electricity gridElectricity gridHeating and cooling - homesHeating and cooling - homesIndustryIndustryLossesLosses
sankey5. Electricity grid,Heating and cooling - homes,11…
Electricity grid → Heating and cooling - homes: 113.73Electricity grid → Industry: 342.17Electricity grid → Losses: 56.69Electricity gridHeating and cooling - homesIndustryLosses
sankey6. Electricity grid,Heating and cooling - homes,11…
Electricity grid → Heating and cooling - homes: 113.73Electricity grid → Industry: 342.17Electricity grid → Losses: 56.69Electricity gridHeating and cooling - homesIndustryLosses
sequence1. autonumber
123456Place orderPOST /ordersAuthorize paymentApproved201 CreatedOrder confirmedOne order, one transactionCustomerWeb appAPI gatewayBankCustomerWeb appAPI gatewayBank
sequence2. autonumber
123456Place orderPOST /ordersAuthorize paymentApproved201 CreatedOrder confirmedOne order, one transactionCustomerWeb appAPI gatewayBankCustomerWeb appAPI gatewayBank
sequence3. participant API@{ "type": "boundary", "alias": …
Login requestQuery userUser dataAccess tokenPublic APIAuth ServiceUser DatabasePublic APIAuth ServiceUser Database
sequence4. participant Alice
Hello John, how are you?John, can you hear me?Hi Alice, I can hear you!I feel great!Did you want to go to the game tonight?Yeah! See you there.Alice calls John.AliceJohnAliceJohn
sequence5. participant Alice
Hello John, how are you?Great!See you later!AliceJohnAliceJohn
sequence6. participant Alice
Hello John, how are you?Great!See you later!AliceJohnAliceJohn
state1. [*] --> Draft
ReviewsubmitapprovedrejectedDraftSubmittedPublishedScreeningDecision
state2. [*] --> First
FirstAnother CompositesecondAnother simple
state3. [*] --> Active
ActiveEvNumLockPressedEvNumLockPressedEvCapsLockPressedEvCapsLockPressedEvScrollLockPressedEvScrollLockPressedNumLockOffNumLockOnCapsLockOffCapsLockOnScrollLockOffScrollLockOn
state4. direction TB
This is the accessible titleThis is an accessible descriptionStillMovingCrash
state5. direction TB
This is the accessible titleThis is an accessible descriptionStillMovingCrash
state6. classDef yourState font-style:italic,font-weigh…
Your state withspaces in itSomeOtherStateYetAnotherState
timeline1. title Timeline of the Hawaiian Islands
Timeline of the Hawaiian IslandsOlder islandsKauaʻi5 million yearsold, Canyons, SeacliffsOʻahu3 million yearsold, Diamond Head,Surf breaksMolokaʻi2 million yearsold, Fishponds,Tall cliffsYounger islandsMaui1 million yearsold, Haleakalā,Whale watchingHawaiʻiStill growing,Mauna Kea, Kīlauea
timeline2. title Hawaiʻi's History Timeline
Hawaiʻi's History TimelineVoyagers1000 ADPolynesianvoyagers reachHawaiʻi in sailingcanoes1778Captain Cook landson Kauaʻi.Islanders andEuropeans meet forthe first time.Kingdom1810King Kamehamehaunites theislands.They are ruled asone kingdom forthe first time.Ships from aroundthe world stop totrade.1882ʻIolani Palace iscompleted inHonolulu.It soon haselectric lightsand telephones.Most people in thekingdom can readand write.
timeline3. title Timeline of Industrial Revolution
Timeline of Industrial Revolution17th-20th centuryIndustry 1.0Machinery, Waterpower, SteampowerIndustry 2.0Electricity,Internalcombustion engine,Mass productionIndustry 3.0Electronics,Computers,Automation21st centuryIndustry 4.0Internet,Robotics, Internetof ThingsIndustry 5.0Artificialintelligence, Bigdata, 3D printing
timeline4. title England's History Timeline
England's History TimelineStone Age7600 BCBritain's oldestknown house wasbuilt in Orkney,Scotland6000 BCSea levels riseand Britainbecomes an island.The people wholive here arehunter-gatherers.Bronze Age2300 BCPeople arrive fromEurope and settlein Britain.They bring farmingand metalworking.New styles ofpottery and waysof burying thedead appear.2200 BCThe last majorbuilding works arecompleted atStonehenge.People now burytheir dead instone circles.The first metalobjects are madein Britain.Someother nice thingshappen. it is agood time to bealive.
timeline5. title MermaidChart 2023 Timeline
MermaidChart 2023 Timeline2023 Q1Release Personal TierBullet 1sub-point 1asub-point 1bsub-point 1cBullet 2sub-point 2asub-point 2b2023 Q2Release XYZ TierBullet 3sub-point3asub-point 3bsub-point 3cBullet 4sub-point 4asub-point 4b
timeline6. title History of Social Media Platform
History of Social Media Platform2002LinkedIn2004FacebookGoogle2005YouTube2006Twitter2007Tumblr2008Instagram2010Pinterest
xychart1. title "Ocean Temperature"
Ocean Temperature747576777879808182janfebmaraprmayjunjulaugsepoctnovdecTemperature (in °F)
xychart2. title "Animals seen in reef survey of 2025"
Animals seen in reef survey of 2025051015202530turtleseelstangswrassesparrot fishotherNumber of Animals12220251724
xychart3. title "Sales Revenue"
Sales Revenue4000500060007000800090001000011000janfebmaraprmayjunjulaugsepoctnovdecRevenue (in $)
xychart4. title "Different Colors in xyChart"
Different Colors in xyChart01020304050Category 1Category 2Category 3Category 4valuesYcategoriesX
xychart5. title "Genres in top 100 book survey of 2025"
Genres in top 100 book survey of 2025051015202530comedyromancemysterycrimenon fictionotherNumber of Books12220251724
xychart6. title "Sales Revenue"
Sales Revenue4000500060007000800090001000011000janfebmaraprmayjunjulaugsepoctnovdecRevenue (in $)500060007500820095001050011000102009200850070006000
agentflow1. brief["Release brief"]@{ shape: input }
Review AgentDrafting AgentReleasebriefDraft thenoteschangelog_searchTone ofvoiceCheck theclaimsAccurate?Publish
agentflow2. brief["Release brief"]@{ shape: input }
Review AgentDrafting AgentReleasebriefDraft thenoteschangelog_searchTone ofvoiceCheck theclaimsAccurate?Publish
agentflow3. brief["Brief"]@{ shape: input }
BriefDraft copyspell_checkStyle guidePublish
agentflow4. global
IndexerSummarizerSharedcorpusSummarizeBuild index
agentflow5. flow intake["Intake"]
OutputIntakeProcessingReceiverequestPublish
agentflow6. connector llm["LLM API"]
Coffee TeamDesignerResearcherLLM APIcityresearch_locationwrite_copygenerate_htmlNordic BrandGuide
architecture1. group api(cloud)[API]
APIDatabaseStorageStorageServer
architecture2. group api(cloud)[API]
APIDB1DB2DB3MCP
architecture3. service src1(server)[Source 1]
Source 1Source 2Source 3Processor
architecture4. group sources(cloud)[Sources]
SourcesStorageOutputSource ASource BSource CDB OneDB TwoDB ThreeBriefAnalystDelivery
architecture5. service left_disk(disk)[Disk]
DiskDiskDiskGatewayGateway
architecture6. group api(logos:aws-lambda)[API]
APIDatabaseStorageStorageServer
cynefin1. title Incident Response
Incident ResponseComplexProbe → Sense → RespondEmergent PracticesInvestigate root causeRun chaos experimentComplicatedSense → Analyse → RespondGood PracticesAnalyze performancedataExpert review neededChaoticAct → Sense → RespondNovel PracticesPage on-callimmediatelyClearSense → Categorise → RespondBest PracticesRestart serviceApply known fixConfusionDisorderUnknown failure mode
cynefin2. title Strategy Categorization
Strategy CategorizationComplexProbe → Sense → RespondEmergent PracticesMarket researchComplicatedSense → Analyse → RespondGood PracticesCompetitive analysisChaoticAct → Sense → RespondNovel PracticesCrisis managementClearSense → Categorise → RespondBest PracticesStandard pricingConfusionDisorderPattern identifiedBest practice codifiedComplacencyStabilized
cynefin3. title Cynefin Framework
Cynefin FrameworkComplexProbe → Sense → RespondEmergent PracticesComplicatedSense → Analyse → RespondGood PracticesChaoticAct → Sense → RespondNovel PracticesClearSense → Categorise → RespondBest PracticesConfusionDisorder
ishikawa1. Blurry Photo
ProcessBeautification filterappliedProtective film notremovedShutter speed too slowOut of focusUserShaky handsEquipmentSENSORDirty sensorDamaged sensorLENSDirty lensDamaged lensInappropriate lensEnvironmentSubject moved tooquicklyToo darkBlurry Photo
radar1. Grades
GradesMathScienceEnglishHistoryGeographyArtAliceBob
radar2. title Restaurant Comparison
Restaurant ComparisonFood QualityServicePriceAmbianceRestaurant ARestaurant BRestaurant CRestaurant D
radar3. axis A, B, C, D, E
ABCDEc1c2c3
railroad1. title "Arithmetic Expression Grammar"
Arithmetic Expression Grammarexpressionterm+-termtermfactor*/factorfactornumber(expression)numberdigitdigit0123456789
railroad2. title "JSON Grammar"
JSON Grammarjsonelementelementobjectarraystringnumbertruefalsenullobject{member,member}array[element,element]memberstring:element
railroad3. title "Email Address"
Email Addressaddresslocal-part@domainlocal-partALPHADIGIT.-domainlabel.labellabelALPHADIGIT-
railroad4. title "Calculator Grammar"
Calculator GrammarExpressionTerm+-TermTermFactor*/FactorFactorNumber(Expression)NumberDigitDigit0123456789
railroad5. title "Identifiers (keywords excluded)"
Identifiers (keywords excluded)Identifier? !Keyword ?LetterLetterKeywordifelsewhileLetterabc_
railroad6. title Expression Grammar
Expression Grammarexpressionterm+-termtermfactor*/factorfactornumber(expression)numberdigitdigit0123456789
swimlane1. subgraph Customer
FinanceWarehouseCustomerBrowse catalogPayPick itemsShip orderRaise invoice
swimlane2. subgraph Customer
EngineeringSupportCustomerKnown issueNeeds code changeRequest serviceReceive updateTriage requestSend answerInvestigate issuePrepare fix
swimlane3. accTitle: Support escalation
Support escalationA request starts with the customer, is triaged by support, and may be escalated to engineering.EngineeringSupportCustomerOpen requestTriageResolve
swimlane4. subgraph Customer
CarrierStoreCustomerSubmit orderConfirm deliveryCheck orderPack itemsCollect packageDeliver package
swimlane5. subgraph Applicant
SystemReviewerApplicantApplication receivedApprovedNeeds changesSubmit applicationSign agreementScreen applicationApproved?Create accountSend welcome email
swimlane6. subgraph Intake
DeliveryReviewIntakeYesNoCollect requestValidate detailsReview requestReady?Schedule workComplete work
treemap1. "Products"
Products180Electronics100Clothing80Phones50Computers30Accessories20Men's40Women's40
treemap2. "Section 1"
Section 257Section 124Section 1.212Leaf 2.225Leaf 2.120Leaf 2.312Leaf 1.112Leaf 1.2.112
treemap3. "Main"
Main50B25A20C5B215B110
treemap4. "Category A"
Category B40Category A30Item B225Item B115Item A220Item A110
treemap5. "Budget"
Budget$1,500,000Operations$1,000,000Marketing$500,000Salaries$700,000Equipment$200,000Supplies$100,000Advertising$400,000Events$100,000
treemap6. "Market Share"
Market Share$100.0%Company A$35.0%Company B$25.0%Others$25.0%Company C$15.0%
treeview1. ├── src/
srcApp.tsxmain componentindex.tsentry point.envenvironment variablesDockerfilepackage.json
treeview2. ├── packages/
packagesmermaidsrcparser.tsrenderer.tspackage.jsonparsersrcREADME.md
treeview3. src/
srcApp.tsxutils.tsDockerfilenotes.txtREADME.md
treeview4. my-project/
my-projectsrcApp.tsxmain componentindex.jsentry point.envenvironment variablesDockerfilepackage.json
treeview5. 🚀 rocket-app/
🚀 rocket-app📦 packages🎨 ui🛠️ utils🧪 tests📝 README.md⚙️ config.yaml
treeview6. "packages"
packagesmermaidsrcparser
usecase1. direction LR
StorefrontFulfilment«include»CustomerSupportBrowse catalogCheckoutTrack delivery
usecase2. actor Normal("Normal actor")
Normal actorHollow actorAwesome actorRegisterediconMissing iconfallbackManage
usecase3. Inspect("Inspect payload")
Inspect payloadPayload2second in source1first after 2enabledtruecount3missingnullcolorsRedGreenaddress.cityOsloitems[0].nameBookemptyObject{}emptyArray[]
usecase4. actor Customer:::external
AccountCustomerCheckoutEdit profileSessionactivetrue
usecase5. direction LR
CustomerBrowse catalog
usecase6. direction LR
Online ordering use casesA customer places an order through the storefront. Staff review the order and inspect its data.Ordering Systemplaces order«include»Customer«Employee»Order staffBrowse products«Core»CheckoutProcess paymentReview orderValidates the cartbefore paymentOrderDatastatuspendingitems[0].nameBookitems[0].quantity1total29.95
venn1. title What makes a good feature
What makes a good featureDesirableFeasibleViableBuildableSustainableMarketableShip it
venn2. title What makes a good feature
What makes a good featureDesirableFeasibleViableBuildableSustainableMarketableShip it
venn3. title "Team overlap"
Team overlapFrontendBackendAPIs
venn4. set Desirable
DesirableFeasibleViableInnovation
venn5. set A["Frontend"]
FrontendReactDesign SystemsBackendAPISharedOpenAPI
venn6. set A["Alpha"]:20
AlphaReactDesign SystemsBetaAB
wardley1. title Tea Shop Value Chain
Tea Shop Value ChainGenesisCustom BuiltProductCommodityEvolutionVisibilityBusinessCup of TeaTeaHot WaterKettlePowerStandardizing power allows Kettles to evolvefaster
wardley2. title Coordinate Examples
Coordinate ExamplesGenesisCustom BuiltProductCommodityEvolutionVisibilityInfrastructureProductUser Need
wardley3. title Sourcing Strategy
Sourcing StrategyGenesisCustom BuiltProductCommodityEvolutionVisibilityCustomerCustom AppOff-the-shelf ToolManaged ServiceCloud Platform
wardley4. title Dual Label Stages
Dual Label StagesGenesis / ConceptCustom / EmergingProduct / ConvergingCommodity / AcceptedEvolutionVisibilityNovel IdeaCustom SolutionProductUtility
wardley5. title Annotations
AnnotationsGenesisCustom BuiltProductCommodityEvolutionVisibilityAPICacheDatabase1231. Critical component2. Performance layer3. Data persistence
wardley6. title Software Platform Strategy
Software Platform StrategyGenesisCustomProductCommodityEvolutionVisibilityCustomerMobile AppWeb AppAPI GatewayAuth ServiceDatabaseCloud Platform1231. User touchpoints2. Integration layer3. Data persistenceBuild mobile-first experienceMigrate to cloud-native databaseCloud NativeLegacy Data

Search pages, sections, diagrams, and API references.