Design Tools

Key Points

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



References

Reference_description_with_linked_URLs_______________________Notes______________________________________________________________


drawing & diagram tools


gd-drawings-foldergd drawings folder **

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

https://www.draw.io/

draw.io free account

Libre Office drawings

Lucidchart subscriptions
https://sequencediagram.org/

free online quick simple sequence diagram generator using simple text inputs **

not EXACTLY mermaid compatible - well documented but not text generation capability

https://www.guru99.com/best-uml-tools.htmlGuru99 list of diagram & modeling tools
https://medevel.com/open-source-uml-tools/EOS diagram & modeling tools list
Mermaid Live online mmd file editor for many diagram typesMermaid Live online mmd file editor for many diagram types **
https://mermaid-js.github.io/mermaid/#/sequenceDiagramMermaid home on github
https://plantuml.com/Plantuml - text-based UML diagramming tool ** 
https://www.figma.com/filesFigma has free account for a FEW and 3 files only > templates, downloads for different diagrams, slides etc




Wireframe design


Figma

https://en.wikipedia.org/wiki/Figma

https://www.figma.com/community

Figma free version limits.  

https://www.figma.com/pricing/

https://www.figma.com/design/



https://cliquestudios.com/free-wireframing-tools/Wireframes - Best free wireframe tools in 2019
https://careerfoundry.com/en/blog/ux-design/free-wireframing-tools/Wireframes - The 9 Best Free Wireframe Tools for UX Designers for 2021
https://mockitt.wondershare.com/wireframe/wireframe-tools-open-source.htmltry Wondershare or ?


db design tools

should forward, reverse engineer from model to db scripts

should have ERD, schemas for SQL, NoSQL

https://www.guru99.com/data-modeling-tools-design-database.htmlvery good list **
https://dbeaver.io/DBeaver - Community Edition
https://www.gleek.io/blog/data-modeling-tools.htmlfree trials
https://www.visual-paradigm.com/shop/vp.jsp?license=perpetualvisual paradigm toolset - different versions - all priced
https://app.diagrams.net/draw.io diagram tool can use gdrive **
https://wisdomplexus.com/blogs/open-source-data-modeling-tools/Good list of open source design tools **
https://www.dbdesigner.net/plans/low monthly cost
https://www.oracle.com/in/database/technologies/appdev/datamodeler.htmlOracle SQL Developer for data modeling








CRUD generation tools

should define model objects / metadata w logical views over entities

should generate full db, ORMs, MVC, frontends

https://grails.org/

https://guides.grails.org/index.html

https://docs.grails.org/5.1.1/guide/single.html

Grails **

https://www.jhipster.tech/

https://github.com/jhipster/generator-jhipster

JHipster *

https://feathersjs.com/

https://docs.feathersjs.com/guides/basics/starting.html#our-first-app

Feathers **
https://www.findbestopensource.com/tagged/crud-generatorEOS CRUD generator list
https://github.com/jaxio/celerio-angular-quickstartJava Angular CRUD generator from DB schema
https://awesomeopensource.com/projects/crud-generator


Containers



Docker

VirtualBox

https://github.com/kubernetes/minikube

https://minikube.sigs.k8s.io/docs/start/

Minikube is an open-source utility that makes it possible to run Kubernetes on a Windows, Mac or Linux laptop or desktop PC.

uses Container or virtual machine manager, such as: Docker, Hyperkit, HyperV, KVM, Parallels, Podman, VirtualBox, or VMware Fusion/Workstation



Data Services Tools

Spark 

https://kylin.apache.org/

https://kyligence.io/resources/apache-kylin-quick-start-guide/

https://cwiki.apache.org/confluence/display/KYLIN/User+Manual+4.X

Apache Kylin is an open source, distributed Analytical Data Warehouse for Big Data;

multi-dimensional cube and precalculation technology on Hadoop and Spark

integrate with your favorite BI tools like Tableau and PowerBI

https://aws.amazon.com/partners/saas-boost/AWS SaaS Boost is an EOS tool used by ISVs to migrate their existing software to a Software-as-a-Service delivery model.

https://delta.io/

https://docs.delta.io/latest/quick-start.html

Delta lake is an open-source project that enables building a Lakehouse Architecture 
https://grafana.com/

Grafana allows you to query, visualize, alert on and understand your metrics no matter where they are stored 

limited runtime for EOS license


Nrwl Nx is an EOS toolkit and framework for building, testing and scaling enterprise-grade Angular applications


BI design tools

should support visualization, creation of shared data sets, transformations, parms

generate data frame or workbook for user to run analytics, what ifs


BIRT
https://www.predictiveanalyticstoday.com/open-source-free-business-
intelligence-solutions/

https://logz.io/blog/business-intelligence-tools/
https://www.ubuntupit.com/best-open-source-bi-tools-and-software/


ML Tools


https://www.tensorflow.org/

https://www.tensorflow.org/tutorials

Tensorflow end-to-end open source machine learning platform

The core open source library to help you develop and train ML models. Get started quickly by running Colab notebooks directly in your browser.







API design tools

should define entity physical, logical models, messages ( request, response )
https://openapi.tools/very good open tools list **
https://github.com/Rhosys/openapi-explorer/blob/main/README.mdOpenAPI explorer reads messages, generators API doc **
https://github.com/OpenAPITools/openapi-generatorOpenAPI Generator *
https://gum.co/openapi_generator_ebookBeginners Guide to Code generation for openapi
https://redocly.github.io/redoc/#section/AuthenticationPetstore app generated as an openapi specs w React Html - supports features
https://techbeacon.com/app-dev-testing/8-open-source-tools-will-lift-your-api-gamegood list of some of the same tools in the openapi/tools list


UI Toolsets


https://github.com/nrwl/nx

https://github.com/nrwl/nx-examples

Nrwl Nx is an EOS toolkit and framework for building, testing and scaling enterprise-grade Angular applications








ETL tools

define producers, consumers, transformers




Process Design Tools

define jepls with producers, consumers, objects, methods, data, events, handlers
https://www.archimatetool.com/TOGAF Archimate toolset **






Message Design Tools










CMS tools
xwiki
jspwiki
liferay
drupal
wordpress
confluence


ERP open source
https://opensource.com/tools/enterprise-resource-planning
https://dynamics.folio3.com/blog/open-source-enterprise-resource-planning-
software/#Odoo





Programmable Web concepts - integrate 3rd party open APIs


https://www.programmableweb.com/category/all/apis








icons
https://www.flaticon.com/free-icons/libraryfree icon library ** subscribed
Art tools
https://makeameme.org/create and use great memes


m GrailsGrails 4x - simple application modeling



Key Concepts



URL Tools


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

The 7 best URL shortener services


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

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

DvP Token Swap
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



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

%%init%% { theme: "dark", logLevel: "debug" }
graphTB



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.alibabacloud.com/blog/597426

PlantUML_Language_Reference_Guide.pdf file



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


34


Free Online Color Picker Converter

https://redketchup.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


Programmable Web API Directory 

https://www.programmableweb.com/category/all/apis



Wikipedia API

Amazon EC2 API
Coinbase API
DIM API
Easy Blockchain API
Blockchain Wallet API
Corda API
Algorand API
Paxos API
Crowdz API
AirSwap Server API
TradeLens API
Basecamp API
Slack Web API
QuickBase API
Passfort API
GitHub API
Amazon SimpleDB API
Amazon RDS Relational Database Service API
Factual v3 API
Food API
Google BigQuery API
SQLify API
Google Cloud DNS API
Google Cloud SQL API
CKAN API
AnySQL Connector API
Amazon EC2 API
Google+ Domains API
US Stocks Fundamentals API
NASDAQ Data-On-Demand API
Finnworlds Analyst Ratings API
Sentiment Investor API
Unofficial Seeking Alpha API
findl API








Step-by-step guide for Example



sample code block

sample code block
 



Recommended Next Steps