Key Points

1. Variety of design tools for different needs
2. Programmable Web concepts - integrate 3rd party open APIs

References

...

drawing & diagram tools

...

https://app.diagrams.net/#G1rbB6ZcNg8-8lLpT3vIH4Ir-t0DpPdYyM

https://www.draw.io/

...

Wireframe design

...

db design tools

should forward, reverse engineer from model to db scripts

...

Key Points

1. Variety of design tools for different needs
2. Programmable Web concepts - integrate 3rd party open APIs

References

Key Concepts

Free UX Design Tools to Review

1. Figma  Clique favorite
2. InVision  Clique favorite
3. Draw.io
4. Pencil Project
5. Wireframe.CC
6. MockFlow
7. Jumpchart
8. Framebox
9. Mydraft.CC
10. Wirefy

Design Process Concepts

...

after factur3.io >

invoicing context > use cases > actors > services > inputs > process > decisions > actions > events > outcomes > variances
( jepl )

openerp, opentrade, openbank, opentradefinance

tnt > service interfaces > models > db schema
map to xuc epics > stories
map to features - functional, non-functional
map to research on features, services, pain points, issues
map to surveys - how now, factur3.io, feelings: value, change

...

a>> market definitions, segments, communities
a>> segment current and competitive solutions: factur3.io
a>> market segment requirements
a>> actors & roles list
a>> use cases list
a>> features list
a>> serviceMgrs list
a>> service processes: jepl
a>> time to value roadmap
a>> related master data
a>> related app interfaces
a>> related documents
a>> logical ERD

#non-functional requirements
dimensions

architecture
onboarding
education
consulting
security
scale
integration
reusability
quality management
operations RAS
maintenance
support
configuration management
policy management
process management
event management
customization
change management
community building
compliance with stds, regs
cilent product kbase
client success management
client usage kbase rewards
promotion

#Solution themes
#themes

...

Potential Value Opportunities

Potential Challenges

Candidate Solutions

Design Tools

vscode design tools - mermaid, plantuml

Mermaid diagrams 

https://mermaid.live/edit/#pako:eNpt0M2qAjEMBeBXidk68wJdKILC1a3bbkJ7xin051pbRMR3tzOOO7MK5DuB5MkmWbDiG64V0WDv5JIl6Eitdt4Z9JvN-pTGqOgP3iea-o7GdCfJoEeq25_4w4zEidAIyRSw0GnWN9rPmbbYfdIdHefErFts9ZsfaQA8XTKkLORb3HFADuJsu-k5zTSXEQGaVWstBqm-aNbx1Wj9t1JwsK6kzGoQf0PHUks6P6JhVXLFFy1_WdTrDbKeYug

...

https://www.cloudhadoop.com/mermaidjs-tutorial/

Markdown Preview Enhanced
https://shd101wyy.github.io/markdown-preview-enhanced/#/file-imports?id=supported-file-types

...

sequencediagram.org 

...

Key Concepts

URL Tools

https://zapier.com/blog/best-url-shorteners/

The 7 best URL shortener services

• Bitly for the best all-around URL shortener

• Rebrandly for an alternative to Bitly

• Dub for a modern URL shortener

• TinyURL for free, fast, and anonymous short URLs

• BL.INK for business owners

• URL Shortener by Zapier for automatically creating short links

• Short.io for a great free plan

https://zapier.com/blog/best-url-shorteners/#tinyurl

Meme Tools

https://makeameme.org/

jm9g 

D01x#yn 

11

key images to build test meme from ...

gdrive folder

Dr Evil

https://screenrant.com/austin-powers-best-funniest-dr-evil-quotes/

Lawrence Fishburne -  Morpheus - The Matrix - What if I told you 

What if I told you ...  trust fuels the crypto world .. and we're low

Bill Lumbergh - Office Space - .. that would be great

https://comicbookandbeyond.com/bill-lumbergh-quotes/

“Hello Peter, what’s happening? Listen, are you gonna have those TPS reports for us this afternoon?”

“Oh, oh, and I almost forgot. Ahh, I’m also gonna need you to go ahead and come in on Sunday, too…”

“Milt, we’re gonna need to go ahead and move you downstairs into storage

MILTON FROM OFFICE SPACE - skeptic 

And I said, I don't care if they lay me off either, because I told, I told Bill that if they move my desk one more time, then, then I'm, I'm quitting, I'm going to quit. 

if they take my stapler.. I'll set the building on fire - enough is enough

SCHRUTE FACTS (DWIGHT SCHRUTE FROM THE OFFICE)

https://parade.com/1196529/alexandra-hurtado/dwight-schrute-quotes/

“There’s too many people on this earth. We need a new plague.”

“I signed up for Second Life about a year ago. Back then, my life was so great that I literally wanted a second one. Absolutely everything was the same. Except I could fly.”

“You know, I really would’ve appreciated a heads up that you were into dating mothers. I would’ve introduced you to mine.”

“Blink once if you want me to pull the plug.”

“I am better than you have ever been or ever will be.”

“I wonder if king-sized sheets are called presidential-sized in England.”

“I am ready to face any challenges that might be foolish enough to face me.”

Greta Thunberg - environmentalist - "Really? I didn't now that"

Free UX Design Tools to Review

1. Figma  Clique favorite
2. InVision  Clique favorite
3. Draw.io
4. Pencil Project
5. Wireframe.CC
6. MockFlow
7. Jumpchart
8. Framebox
9. Mydraft.CC
10. Wirefy

Design Process Concepts

-------------------------
#architecture.model
#solution.process
#architecture.practice

after FACTUR3DT.io >

invoicing context > use cases > actors > services > inputs > process > decisions > actions > events > outcomes > variances
( jepl )

openerp, opentrade, openbank, opentradefinance

tnt > service interfaces > models > db schema
map to xuc epics > stories
map to features - functional, non-functional
map to research on features, services, pain points, issues
map to surveys - how now, FACTUR3DT.io, feelings: value, change

actors > roles > use cases > features
> serviceMgrs > processes > events

a>> market definitions, segments, communities
a>> segment current and competitive solutions: FACTUR3DT.io
a>> market segment requirements
a>> actors & roles list
a>> use cases list
a>> features list
a>> serviceMgrs list
a>> service processes: jepl
a>> time to value roadmap
a>> related master data
a>> related app interfaces
a>> related documents
a>> logical ERD

#non-functional requirements
dimensions

architecture
onboarding
education
consulting
security
scale
integration
reusability
quality management
operations RAS
maintenance
support
configuration management
policy management
process management
event management
customization
change management
community building
compliance with stds, regs
cilent product kbase
client success management
client usage kbase rewards
promotion

#Solution themes
#themes

Key Themes Concepts
BPE - business process engineering
CIP - continuous improvement process
EOS - enterprise open-source
CDS - customer driven solutions
TDD - test driven delivery
SOE - service oriented engineering
SSM - smart service management
SDM - smart data management
SDD - sprint driven development
CDP - continuous delivery process
MDG - model driven engineering
RT3 - right tools, training, talent to do job right
VE - validate everything > EEP
LNB - learning new behavior
ARS - app recovery services: rollback, forward

Potential Value Opportunities

Potential Challenges

Candidate Solutions

Design Tools

vscode design tools - mermaid, plantuml

Online Sequence Diagram Tool - limited value

https://sequencediagram.org/

cbdc example file - 

"diag-OpenCBDC Mint operation w Atomizer.txt"

https://drive.google.com/file/d/1CJC5A1JAHXhR_BHGqdkBx43P5pH9KWJH/view?usp=sharing

HTML color code builder

https://htmlcolorcodes.com/

Notes

1. Good, simple manual - quick to learn - 

   https://sequencediagram.org/instructions.html

2. Close but not Mermaid compatible syntax
3. no text generation as metadata for runtime doc 
4. diagrams need to be defined and viewed ONLY in the online tool
5. no IDE editors - online edit and view only

Sample Dvp Token Swap using Hash Timelock Contract Model

title DvP Token Swap: Hash Time Lock Contract Model

actor "Seller\nBank" as Seller #DCE4B3
database "Seller\nLedger" as SLedger #fcdcd4
database "Buyer\nLedger" as BLedger #E6E0B7
actor "Buyer\nBank" as Buyer #B7E6E2

bottomparticipants
actor Seller
database SLedger
database BLedger
actor Buyer

note over SLedger,BLedger #lightblue:Seller sells 10 IBM share tokens\n to Buyer for 100 USD tokens

note over SLedger,BLedger #lightgreen:If settlement time exceeds time limit\n assets are retained by original parties


Seller->Seller:Seller creates secret\nand it's hash

aboxright over Seller, Buyer #DCE4B3:Seller creates shares order for buyer\nif buyer uses secret

Buyer<-Buyer:Buyer verifies seller\n shares order

aboxleft over Buyer, Seller #B7E6E2:Buyer creates a payment order to seller\n if the seller provides the same secret

Seller->Seller:Seller accesses payment\n order using the secret

aboxright over Seller, Buyer #DCE4B3:Seller signs a new payment\n receipt to access the funds

Buyer->Buyer:Buyer accesses payment \nreceipt secret

aboxleft over Buyer, Seller #B7E6E2:Buyer signs a new shares receipt\n to access the shares

Image Added

Mermaid diagrams 

https://mermaid.live/edit/#pako:eNpt0M2qAjEMBeBXidk68wJdKILC1a3bbkJ7xin051pbRMR3tzOOO7MK5DuB5MkmWbDiG64V0WDv5JIl6Eitdt4Z9JvN-pTGqOgP3iea-o7GdCfJoEeq25_4w4zEidAIyRSw0GnWN9rPmbbYfdIdHefErFts9ZsfaQA8XTKkLORb3HFADuJsu-k5zTSXEQGaVWstBqm-aNbx1Wj9t1JwsK6kzGoQf0PHUks6P6JhVXLFFy1_WdTrDbKeYug

https://ruleoftech.com/2018/generating-documentation-as-code-with-mermaid-and-plantuml

https://www.cloudhadoop.com/mermaidjs-tutorial/

VSCode Mermaid Editor plugins

Markdown Preview Enhanced
https://shd101wyy.github.io/markdown-preview-enhanced/#/file-imports?id=supported-file-types

Mermaid Editor
https://marketplace.visualstudio.com/items?itemName=tomoyukim.vscode-mermaid-editor

Themes available for the online editor 

Available Themes​

1. default - This is the default theme for all diagrams.

2. neutral - This theme is great for black and white documents that will be printed.

3. dark - This theme goes well with dark-colored elements or dark-mode.

4. forest - This theme contains shades of green.

5. base - This is the only theme that can be modified. Use this theme as the base for customizations.

Customize diagram with %%init%% directive 

https://mermaid.js.org/config/setup/interfaces/mermaid.Mermaid.html#init

Sample mermaid-qatar-conceptual-layers1.png. diagram  - flowchart

flowchart TD
%% Style definitions
classDef actorLayer fill:#f0f4ff,stroke:#000,stroke-width:3px
classDef deviceLayer fill:#f0fff4,stroke:#000,stroke-width:3px
classDef dataLayer fill:#fff0f4,stroke:#000,stroke-width:3px
classDef trustLayer fill:#fffaf0,stroke:#000,stroke-width:3px
classDef solutionsLayer fill:#f5f0ff,stroke:#000,stroke-width:3px
classDef box fill:#ffffff,stroke:#000,stroke-width:2px
classDef sectionTitle fontSize:24px,fontWeight:bold
classDef normalText fontSize:20px

linkStyle default stroke:#000,stroke-width:3px

%% Actors Layer
subgraph AL["<div style='font-size:24px;font-weight:bold'>Actors Layer</div>"]
direction LR
subgraph Personas["<div style='font-size:24px;font-weight:bold'>Personas</div>"]
CI["<div style='font-size:20px'>👤 Citizens</div>"]:::box 
GO["<div style='font-size:20px'>🏛️ Government</div>"]:::box 
ST["<div style='font-size:20px'>👨‍💼 Staff</div>"]:::box 
SM["<div style='font-size:20px'>🏢 Business SMEs</div>"]:::box 
CO["<div style='font-size:20px'>👷 Contractors</div>"]:::box 
SU["<div style='font-size:20px'>🏭 Suppliers</div>"]:::box
end
end

%% Device Layer
subgraph DL["<div style='font-size:24px;font-weight:bold'>Device Layer</div>"]
direction LR
subgraph Devices["<div style='font-size:24px;font-weight:bold'>Devices</div>"]
MD["<div style='font-size:20px'>📱 Mobile Devices</div>"]:::box 
LP["<div style='font-size:20px'>💻 Laptops</div>"]:::box 
subgraph DW["<div style='font-size:24px;font-weight:bold'>Digital Wallets</div>"]
direction TB
DI["<div style='font-size:20px'>🆔 Digital ID</div>"]:::box
CR["<div style='font-size:20px'>📜 Credentials</div>"]:::box
LI["<div style='font-size:20px'>📋 Licenses</div>"]:::box
end
end
end

%% Qatar Data Center Layer
subgraph DC["<div style='font-size:24px;font-weight:bold; white-space: nowrap'>Qatar Data Center Layer</div>"]
direction LR
EN["<div style='font-size:20px'>🔵 Edge Nodes</div>"]:::box ---
CN["<div style='font-size:20px'>☁️ Cloud Nodes</div>"]:::box ---
KC["<div style='font-size:20px'>⚙️ Kubernetes Cluster</div>"]:::box ---
AG["<div style='font-size:20px'>🔗 API Gateway Manager</div>"]:::box ---
RS["<div style='font-size:20px'>🔄 Routing Services</div>"]:::box
end

%% Trust Layer
subgraph TL["<div style='font-size:24px;font-weight:bold'; white-space: nowrap>Trust Layer</div>"]
subgraph TG["<div style='font-size:24px;font-weight:bold'>TrustGrid</div>"]
direction TB
IA["<div style='font-size:20px'>🔐 Identity Authentication</div>"]:::box
DS["<div style='font-size:20px'>💾 Account Data Store</div>"]:::box
IL["<div style='font-size:20px'>📒 Identity Ledger</div>"]:::box
end
SM2["<div style='font-size:20px'>🛡️ Security Management</div>"]:::box
end

%% Solutions Layer
subgraph SL["<div style='font-size:24px;font-weight:bold; white-space: nowrap'>Qatar Secure Solutions Layer</div>"]
direction TB
subgraph ZO["<div style='font-size:24px;font-weight:bold'>Zoho</div>"]
subgraph L1["<div style='font-size:20px'>apps</div>"]
direction LR
LC["<div style='font-size:20px'>📄 Licensing</div>"]:::box
TX["<div style='font-size:20px'>💰 Taxation</div>"]:::box
CP["<div style='font-size:20px'>✅ Compliance</div>"]:::box
SC["<div style='font-size:20px'>🔄 Supply Chain</div>"]:::box
end
subgraph L2["<div style='font-size:20px'>apps</div>"]
direction LR
FN["<div style='font-size:20px'>💹 Financials</div>"]:::box
HR["<div style='font-size:20px'>👥 HRM</div>"]:::box
CR2["<div style='font-size:20px'>🤝 CRM</div>"]:::box
PM["<div style='font-size:20px'>📊 Project & Risk Mgt</div>"]:::box
end
direction TB
subgraph L3["<div style='font-size:20px'>apps</div>"]
EC["<div style='font-size:20px'>🛒 eCommerce Links</div>"]:::box
CB["<div style='font-size:20px'>👥 Collaboration</div>"]:::box
AN["<div style='font-size:20px'>📈 Analytics</div>"]:::box 
end
end
OA["<div style='font-size:20px'>Other Qatar Applications</div>"]:::box
end

%% Layer connections
AL --> DL
DL --> DC
DC --> TL
TL --> SL

%% Apply styles
class AL actorLayer
class DL deviceLayer
class DC dataLayer
class TL trustLayer
class SL solutionsLayer

Image Added

mermaid-seq-diag-defi2

%%{init: {'theme': 'base', 'themeVariables': 
{'actorBackground':'#90d5ff',
'actorBorder': '#000000',
'actorFontWeight':'bold', 
'sequenceMessageFontSize': '14px', 
'messageFontWeight': 'bold'}}}%%
sequenceDiagram
participant User as User
participant Wallet as Wallet<br>App
participant DNetwork as Decentralized<br>Network
participant SmartContract as Smart<br>Contract
participant Bank as Bank

User->>Wallet: Enter recipient<br>DID or scan QR code
Wallet->>DNetwork: Send transaction<br>details
DNetwork-->>Wallet: Validate<br>transaction
DNetwork->>SmartContract: Execute conditions<br>(if applicable)
SmartContract-->>DNetwork: Return result<br>of execution
DNetwork->>Bank: Communicate via<br>secure APIs
Bank->>DNetwork: Update records<br>and confirm
DNetwork->>Wallet: Update ledger<br>and confirm transaction
Wallet->>User: Notify sender<br>of success
Wallet->>Recipient: Notify recipient<br>of success
DNetwork->>AuditTrail: Log transaction<br>for compliance

Image Added

Mermaid Flowchart Doc

Plantuml Diagrams

https://plantuml.com/

plantuml online
http://www.plantuml.com/plantuml/uml/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000

plantuml in vscode
https://www.youtube.com/watch?v=xkwJ9GwgZJU

https://mermaid-js.github.io/mermaid/#/

Plantuml examples

Plantuml for C4 Tiers and Layers Diagrams Tutorial

https://www.youtubealibabacloud.com/watch?v=xkwJ9GwgZJUblog/597426

PlantUML_Language_Reference_Guide.pdf file

plantuml-tutorial-2022-alibabacloud.com-Architecture Drawing Tools and Methodology.pdf file

Image Added

Free Online Color Picker Converter

https://mermaid-jsredketchup.github.io/mermaid/#/io/color-picker

pick a color to get HEX, RGB values

use HEX or RGB values to see color

Fed Data Downloads

https://www.federalreserve.gov/datadownload/Choose.aspx?rel=H10

...