Skip to content
Pele x

Diagram examples

Block

Section titled “Block”
LabelLabelLabelLabelLabelLabelLabel
aghijklmnopqr

All examples

C4

Section titled “C4”
Component diagram for Internet Banking System - API ApplicationAPI Application[CONTAINER]«container»Single Page Application[javascript and angular]Provides all the internet bankingfunctionality to customers viatheir web browser.«container»Mobile App[Xamarin]Provides a limited subset to theinternet banking functionality tocustomers via their mobiledevice.«container db»Database[Relational Database Schema]Stores user registrationinformation, hashedauthentication credentials,access logs, etc.«external system»Mainframe BankingSystemStores all of the core bankinginformation about customers,accounts, transactions, etc.«component»Sign In Controller[MVC Rest Controller]Allows users to sign in to theinternet banking system«component»Accounts SummaryController[MVC Rest Controller]Provides customers with asummary of their bank accounts«component»Security Component[Spring Bean]Provides functionality related tosinging in, changing passwords,etc.«component»Mainframe BankingSystem Facade[Spring Bean]A facade onto the mainframebanking system.UsesUsesRead & write to[JDBC]Uses[XML/HTTPS]Uses[JSON/HTTPS]Uses[JSON/HTTPS]Uses[JSON/HTTPS]Uses[JSON/HTTPS]

All examples

Class

Section titled “Class”
EarthEarth.Volcano.SummitEarth.Volcano.SlopefeedsfeedsCrater+erupt()LavaFlow+buildLand()Hotspot+meltRock()
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

All examples

Entity relationship

Section titled “Entity relationship”
title2title3title1allowsCUSTOMERstringnamestringcustNumberstringsectorCARNAMED-DRIVERPERSONstringfirstNamestringlastNameintage
allowsismakesCARstringregistrationNumberPKstringmakestringmodelstring[]partsNAMED-DRIVERstringcarRegistrationNumberPK, FKstringdriverLicensePK, FKPERSONstringdriversLicensePKThe license #string(99)firstNameOnly 99 characters are allowedstringlastNamestringphoneUKintageMANUFACTURER

All examples

Event modeling

Section titled “Event modeling”
UI/AutomationCommand/Read ModelEventsCartUIAddItemdescription: ‘john’image: ‘avatar_john’price: 20.4ItemAddeddescription: stringimage: stringprice: numberAddItemdescription: ‘jack’image: ‘avatar_jack’price: 12.5ItemAddeddescription: stringimage: stringprice: number
UI/AutomationCommand/Read ModelEventsStream: ExternalStream: CartCartUIAddItemItemAddedInventoryChangedInventoryProcessorChangeInventoryInventoryChanged

All examples

Flowchart

Section titled “Flowchart”
subgraph2subgraph1topbottomtopbottomoutside
StorageServicesClienttokenWeb appLocal cacheAPI gatewayAuth serviceOrder serviceOrders DB

All examples

Gantt

Section titled “Gantt”
Git Issues - days since last update71363495Issue19062Issue19401Issue193Issue7441Issue13000510152025303540455055606570
A Gantt DiagramA taskAnother taskTask in Anotheranother taskSectionAnother2014-01-052014-01-122014-01-192014-01-262014-02-022014-02-092014-02-16

All examples

Git graph

Section titled “Git graph”
maindevelopreleaseZEROAONEBMERGETWOcherry-pick:MERGE|parent:BTHREEC
mainhotfixdevelopfeatureBfeatureArelease0-9e3779b1-3c6ef36ashabc3-78dde6c4-17156075-b54cda26-538453d8-8ff34739-2e2ac0e11-6a99b4412-08d12df14-454021515-e3779b1

All examples

Kanban

Section titled “Kanban”
Todo1Update DatabaseFunctionMC-2037knsv
Todo2Create DocumentationCreate Blog about thenew diagramIn progress1Create renderer so that itworks in all cases. Wealso add some extra texthere for testing purposes.And some more just forthe extra flare.Ready for deploy1Design grammarknsvReady for test2Create parsing testsMC-2038K.Sveidqvistlast itemknsvDone3define getDataTitle of diagram is morethan 100 chars when userduplicates diagram with100 charMC-2036Update DB functionMC-2037knsvCan’t reproduce1Weird flickering in Firefox

All examples

Mindmap

Section titled “Mindmap”
HistoryOld legendsVoyagingPolynesian navigators whosailed by the starsNatureMountainsand volcanoesOcean lifeReefSea turtlesMonk sealsParrotfishCultureHula and leiʻUkuleleHawaiʻi
She lives in the crater ofKīlauea… a very old storythat is still told todayLava builds new landPele is thegoddess of volcanoesUnicode works too: 🌋

All examples

Packet

Section titled “Packet”
Source PortDestination PortSequence NumberAcknowledgment NumberData OffsetReservedURGACKPSHRSTSYNFINWindowChecksumUrgent Pointer(Options and Padding)Data (variable length)Data (variable length)0151631326364959699100105106107108109110111112127128143144159160191192223224255TCP Packet
DATATYPEENRESERVED70118121513

All examples

Pie

Section titled “Pie”
Fish caught by the crew79%17%3%ʻAhiMahimahiOno

All examples

Quadrant chart

Section titled “Quadrant chart”
Reach and engagement of campaignsWe should expandNeed to promoteRe-evaluateMay be improvedLow ReachHigh ReachLow EngagementHigh EngagementCampaign ACampaign BCampaign CCampaign DCampaign ECampaign F

All examples

Requirement

Section titled “Requirement”
«contains»«satisfies»«Requirement»checkout_reqID1TextOrders must be payable online.RiskHighVerificationTest«Functional Requirement»payment_reqID1.1TextCard payments must be authorized.RiskHighVerificationTest«Element»checkout_serviceTypeservice
«satisfies»«Requirement»test_reqID1Textthe test text.RiskHighVerificationTest«Element»test_entityTypesimulation

All examples

Sankey

Section titled “Sankey”
Electricity grid → Heating and cooling - homes: 113.73Electricity grid → Industry: 342.17Electricity grid → Losses: 56.69Electricity gridHeating and cooling - homesIndustryLosses
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

All examples

Sequence

Section titled “Sequence”
123456Place orderPOST /ordersAuthorize paymentApproved201 CreatedOrder confirmedOne order, one transactionCustomerWeb appAPI gatewayBankCustomerWeb appAPI gatewayBank
Hello John, how are you?Great!See you later!AliceJohnAliceJohn

All examples

State

Section titled “State”
ReviewsubmitapprovedrejectedDraftSubmittedPublishedScreeningDecision
ActiveEvNumLockPressedEvNumLockPressedEvCapsLockPressedEvCapsLockPressedEvScrollLockPressedEvScrollLockPressedNumLockOffNumLockOnCapsLockOffCapsLockOnScrollLockOffScrollLockOn

All examples

Timeline

Section titled “Timeline”
Timeline of the Hawaiian IslandsOlder islandsKauaʻi5 million years old,Canyons, SeacliffsOʻahu3 million years old,Diamond Head, SurfbreaksMolokaʻi2 million years old,Fishponds, Tall cliffsYounger islandsMaui1 million years old,Haleakalā, WhalewatchingHawaiʻiStill growing, MaunaKea, Kīlauea
Hawaiʻi’s History TimelineVoyagers1000 ADPolynesian voyagersreach Hawaiʻi in sailingcanoes1778Captain Cook lands onKauaʻi.Islanders andEuropeans meet for thefirst time.Kingdom1810King Kamehamehaunites the islands.They are ruled as onekingdom for the firsttime.Ships from around theworld stop to trade.1882ʻIolani Palace iscompleted in Honolulu.It soon has electriclights and telephones.Most people in thekingdom can read andwrite.

All examples

User journey

Section titled “User journey”
My working day54321Go to workMake teaMeGo upstairsMeDo workMeCatGo homeGo downstairsMeSit downMeCatMe

All examples

XY chart

Section titled “XY chart”
Ocean Temperature747576777879808182janfebmaraprmayjunjulaugsepoctnovdecTemperature (in °F)
Animals seen in reef survey of 2025051015202530turtleseelstangswrassesparrot fishotherNumber of Animals12220251724

All examples

Agentflow

Section titled “Agentflow”
OutputIntakeProcessingReceive requestPublish
Coffee TeamDesignerResearcherLLM APIcityresearch_locationwrite_copygenerate_htmlNordic BrandGuide

All examples

Architecture

Section titled “Architecture”
DiskDiskDiskGatewayGateway
SourcesStorageOutputSource ASource BSource CDB OneDB TwoDB ThreeBriefAnalystDelivery

All examples

Cynefin

Section titled “Cynefin”
Strategy CategorizationComplexProbe → Sense → RespondEmergent PracticesMarket researchComplicatedSense → Analyse → RespondGood PracticesCompetitive analysisChaoticAct → Sense → RespondNovel PracticesCrisis managementClearSense → Categorise → RespondBest PracticesStandard pricingConfusionDisorderPattern identifiedBest practice codifiedComplacencyStabilized

All examples

Ishikawa

Section titled “Ishikawa”
ProcessBeautification filter appliedProtective film not removedShutter speed too slowOut of focusUserShaky handsEquipmentSENSORDirty sensorDamaged sensorLENSDirty lensDamaged lensInappropriate lensEnvironmentSubject moved too quicklyToo darkBlurry Photo

All examples

Radar

Section titled “Radar”
Restaurant ComparisonFood QualityServicePriceAmbianceRestaurant ARestaurant BRestaurant CRestaurant D
GradesMathScienceEnglishHistoryGeographyArtAliceBob

All examples

Railroad

Section titled “Railroad”
Arithmetic Expression Grammarexpressionterm+-termtermfactor*/factorfactornumber(expression)numberdigitdigit0123456789
Expression Grammarexpressionterm+-termtermfactor*/factorfactornumber(expression)numberdigitdigit0123456789

All examples

Swimlane

Section titled “Swimlane”
EngineeringSupportCustomerKnown issueNeeds code changeRequest serviceReceive updateTriage requestSend answerInvestigate issuePrepare fix
SystemReviewerApplicantApplication receivedApprovedNeeds changesSubmit applicationSign agreementScreen applicationApproved?Create accountSend welcome email

All examples

Tree view

Section titled “Tree view”
srcApp.tsxutils.tsDockerfilenotes.txtREADME.md
my-projectsrcApp.tsxmain componentindex.jsentry point.envenvironment variablesDockerfilepackage.json

All examples

Treemap

Section titled “Treemap”
Budget$1,500,000Operations$1,000,000Marketing$500,000Salaries$700,000Equipment$200,000Supplies$100,000Advertising$400,000Events$100,000
Products180Electronics100Clothing80Phones50Computers30Accessories20Men’s40Women’s40

All examples

Use case

Section titled “Use case”
CustomerBrowse catalog
StorefrontFulfilment«include»CustomerSupportBrowse catalogCheckoutTrack delivery

All examples

Venn

Section titled “Venn”
What makes a good featureDesirableFeasibleViableBuildableSustainableMarketableShip it
FrontendReactDesign SystemsBackendAPISharedOpenAPI

All examples

Wardley map

Section titled “Wardley map”
Tea Shop Value ChainGenesisCustom BuiltProductCommodityEvolutionVisibilityBusinessCup of TeaTeaHot WaterKettlePowerStandardizing power allows Kettles to evolve faster
Sourcing StrategyGenesisCustom BuiltProductCommodityEvolutionVisibilityCustomerCustom AppOff-the-shelf ToolManaged ServiceCloud Platform

All examples