example flowchart Link textSquare RectCircleRound RectRhombus example sequence diagram JohnBobAliceJohnBobAliceloop[HealthCheck]Rational thoughtsprevail...Hello John, how are you?Fight against hypochondriaGreat!How about you?Jolly good! example c4 deployment diagram <<container>>Mobile App[Xamarin]Provides a limited subset of the Internet Banking functionality to customers via their mobile device.Customer's mobile device[Apple IOS or Android]<<container>>Single Page Application[JavaScript and Angular]Provides all of the Internet Banking functionality to customers via their web browser.Web Browser[Google Chrome, Mozilla Firefox, Apple Safari or Microsoft Edge]Customer's computer[Microsoft Windows or Apple macOS]<<container>>API Application[Java and Spring MVC]Provides Internet Banking functionality via a JSON/HTTPS API.Apache Tomcat[Apache Tomcat 8.x]bigbank-api*** x8[Ubuntu 16.04 LTS]<<container>>Web Application[Java and Spring MVC]Delivers the static content and the Internet Banking single page application.Apache Tomcat[Apache Tomcat 8.x]bigbank-web*** x4[Ubuntu 16.04 LTS]<<container_db>>Database[Relational Database Schema]Stores user registration information, hashed authentication credentials, access logs, etc.Oracle - Primary[Oracle 12c]bigbank-db01[Ubuntu 16.04 LTS]<<container_db>>Database[Relational Database Schema]Stores user registration information, hashed authentication credentials, access logs, etc.Oracle - Secondary[Oracle 12c]bigbank-db02[Ubuntu 16.04 LTS]Big Bank plc[Big Bank plc data center]Makes API calls to[json/HTTPS]Makes API calls to[json/HTTPS]Delivers to the customer's web browserReads from and writes to[JDBC]Reads from and writes to[JDBC]Replicates data toDeployment Diagram for Internet Banking System - Live example mindmap mindmapOriginsResearchToolsLong historyPopularisationOn effectivenessand featuresOn Automatic creationPen and paperMermaidBritish popular psychologyauthor Tony BuzanUsesCreative techniquesStrategic planningArgument mapping example timeline 17th-20th centuryIndustry 1.0Machinery, Waterpower, Steam<br/>powerIndustry 2.0Electricity, Internalcombustion engine,Mass productionIndustry 3.0Electronics,Computers,Automation21st centuryIndustry 4.0Internet, Robotics,Internet of ThingsIndustry 5.0Artificial intelligence,Big data, 3D printingTimeline of Industrial Revolution sankey Bio-conversion 388.33Losses 26.86Solid 280.32Gas 81.14 example c4 context diagram <<person>>Banking Customer AA customer of the bank, with personal bank accounts.<<person>>Banking Customer B<<external_person>>Banking Customer Cdesc<<person>>Banking Customer DA customer of the bank, with personal bank accounts.<<system>>Internet Banking SystemAllows customers to view information about their bank accounts, and make payments.<<external_system_db>>Mainframe Banking SystemStores all of the core banking information about customers, accounts, transactions, etc.<<external_system>>E-mail systemThe internal Microsoft Exchange e-mail system.<<system_db>>Banking System D DatabaseA system of the bank, with personal bank accounts.<<system>>Banking System A<<system>>Banking System BA system of the bank, with personal bank accounts. next line.BankBoundary2[SYSTEM]<<system_queue>>Banking System F QueueA system of the bank.<<external_system_queue>>Banking System G QueueA system of the bank, with personal bank accounts.BankBoundary3[boundary]BankBoundary[ENTERPRISE]BankBoundary0[ENTERPRISE]UsesUsesSends e-mails[SMTP]Sends e-mails toSystem Context diagram for Internet Banking System example c4 component diagram <<container>>Single Page Application[javascript and angular]Provides all the internet banking functionality to customers via their web browser.<<container>>Mobile App[Xamarin]Provides a limited subset to the internet banking functionality to customers via their mobile mobile device.<<container_db>>Database[Relational Database Schema]Stores user registration information, hashed authentication credentials, access logs, etc.<<external_system>>Mainframe Banking SystemStores all of the core banking information about customers, accounts, transactions, etc.<<component>>Sign In Controller[MVC Rest Controller]Allows users to sign in to the internet banking system<<component>>Accounts Summary Controller[MVC Rest Controller]Provides customers with a summary of their bank accounts<<component>>Security Component[Spring Bean]Provides functionality related to singing in, changing passwords, etc.<<component>>Mainframe Banking System Facade[Spring Bean]A facade onto the mainframe banking system.API Application[CONTAINER]UsesUsesRead & write to[JDBC]Uses[XML/HTTPS]Uses[JSON/HTTPS]Uses[JSON/HTTPS]Uses[JSON/HTTPS]Uses[JSON/HTTPS]Component diagram for Internet Banking System - API Application quadrant chart We should expandNeed to promoteRe-evaluateMay be improvedCampaign FCampaign ECampaign DCampaign CCampaign BCampaign ALow ReachHigh ReachLow EngagementHigh EngagementReach and engagement of campaigns example use case diagram 'Online Shopping'includeincludeView itemsMake purchaseComplete CheckoutLog InCustomer👤credit_payment_service 💳identity_provider🆔service_authentification🔑paypal💲 sources https://mermaid.js.org/syntax/examples.html