├── icons ├── schematics_logo_64x64.png ├── namedsvg │ ├── File.svg │ ├── Email.svg │ ├── Install.svg │ ├── Auto Scaling.svg │ ├── Generate.svg │ ├── Alert Notification.svg │ ├── Load Balancing.svg │ ├── APP UI.svg │ ├── IDE.svg │ ├── Predictive Market Scenario.svg │ ├── Bank Services.svg │ ├── Ivestment Portfolio.svg │ ├── Local Network.svg │ ├── Backend Server.svg │ ├── Virtual Reality.svg │ ├── Composer Rest Server.svg │ ├── External Service.svg │ ├── Application Server.svg │ ├── Outbound Calls.svg │ ├── Microphone.svg │ ├── View Logs.svg │ ├── Discovery Collection.svg │ ├── IBM Data Science Experience.svg │ ├── Developer Portal.svg │ ├── Cloud Shell.svg │ ├── Store.svg │ ├── Customer Database.svg │ ├── Configure.svg │ ├── Sensor.svg │ ├── List.svg │ ├── Service Provider.svg │ ├── zOS.svg │ ├── Example Data Set.svg │ ├── Store Sales.svg │ ├── Bot.svg │ ├── API.svg │ ├── Brokerage.svg │ ├── Inventory.svg │ ├── Converbelt.svg │ ├── Break Circuit.svg │ ├── Account Management.svg │ ├── Access Controll List.svg │ ├── Media.svg │ ├── Recommendation Service.svg │ ├── IBM Cloud.svg │ ├── Market Data.svg │ ├── Outlet.svg │ ├── Service.svg │ ├── Online News Content.svg │ └── Distribution Center.svg └── refarch │ ├── E-Commerce │ ├── Commerce Digital Experience.svg │ ├── Commerce Merchandising.svg │ ├── Commerce Marketing.svg │ ├── Commerce Payment.svg │ ├── Commerce e-Commerce Appl.svg │ ├── Commerce Customer Care.svg │ ├── Commerce Distributed Order.svg │ ├── Commerce Warehouse Mgmt.svg │ ├── Commerce Business Process.svg │ └── Commerce Supply Chain Mgmt.svg │ ├── VPC │ ├── classic_tag.svg │ ├── load_balancer.svg │ ├── public_gateway.svg │ ├── floating_ip.svg │ ├── bridge.svg │ ├── direct_link.svg │ ├── router.svg │ ├── region_tag.svg │ ├── vpn_policy.svg │ ├── subnet_tag.svg │ ├── zone_tag.svg │ ├── internet_services.svg │ ├── rules.svg │ ├── public_tag.svg │ ├── vpn_gateway.svg │ ├── datacenter.svg │ └── ibm_cloud_tag.svg │ ├── Social │ └── Messaging.svg │ ├── Applications │ ├── Annotate.svg │ ├── Index.svg │ └── SaaSApplications.svg │ ├── Data │ ├── DataServices.svg │ └── EnterpriseUserDirectory.svg │ ├── DevOps │ └── CodeEditor.svg │ ├── Security │ └── Application Security-19.svg │ └── Users │ ├── browser.svg │ └── user interface.svg ├── .gitignore ├── README.md ├── package.json ├── .github └── workflows │ └── publish.yml ├── LICENSE ├── scripts └── publish.sh ├── configuration.json ├── architecture-icons.json ├── architecture.js ├── pages ├── all-resources.js ├── more-icons.js ├── vpc.js └── default-diagram.js └── lib ├── page-helper.js └── image-helper.js /icons/schematics_logo_64x64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l2fprod/myarchitecture/HEAD/icons/schematics_logo_64x64.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | public 3 | *mycatalog-architecture-diagram-template.pptx 4 | build 5 | icons/namedsvg/*.png 6 | icons/refarch/*/*.png 7 | drawio.xml 8 | -------------------------------------------------------------------------------- /icons/namedsvg/File.svg: -------------------------------------------------------------------------------- 1 | Journey Icons 2 -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Generates a template deck for architecture diagrams 2 | 3 | More at https://l2fprod.github.io/myarchitecture/ 4 | ## License 5 | 6 | The source code for the template generation is licensed under the Apache License Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0). 7 | -------------------------------------------------------------------------------- /icons/namedsvg/Email.svg: -------------------------------------------------------------------------------- 1 | Journey Icons -------------------------------------------------------------------------------- /icons/namedsvg/Install.svg: -------------------------------------------------------------------------------- 1 | Journey Icons 2 -------------------------------------------------------------------------------- /icons/namedsvg/Auto Scaling.svg: -------------------------------------------------------------------------------- 1 | Journey Icons 2 -------------------------------------------------------------------------------- /icons/namedsvg/Generate.svg: -------------------------------------------------------------------------------- 1 | Journey Icons 2 -------------------------------------------------------------------------------- /icons/namedsvg/Alert Notification.svg: -------------------------------------------------------------------------------- 1 | Journey Icons 2 -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "myarchitecture", 3 | "version": "1.0.0", 4 | "dependencies": { 5 | "async": "^3.2.6", 6 | "html-entities": "^1.2.1", 7 | "humanize-string": "2.1.0", 8 | "pako": "^1.0.10", 9 | "pptxgenjs": "^2.6.0", 10 | "recursive-readdir": "^2.2.3", 11 | "request": "^2.88.0", 12 | "sharp": "^0.33.5", 13 | "svg2png": "^4.1.1" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /icons/refarch/E-Commerce/Commerce Digital Experience.svg: -------------------------------------------------------------------------------- 1 | Commerce SOURCE FILES -------------------------------------------------------------------------------- /icons/refarch/E-Commerce/Commerce Merchandising.svg: -------------------------------------------------------------------------------- 1 | Commerce SOURCE FILES -------------------------------------------------------------------------------- /.github/workflows/publish.yml: -------------------------------------------------------------------------------- 1 | name: ci 2 | 3 | on: 4 | push: 5 | branches: [ master ] 6 | schedule: 7 | - cron: "0 7 * * MON" 8 | 9 | jobs: 10 | main: 11 | runs-on: ubuntu-latest 12 | steps: 13 | - uses: actions/checkout@v2 14 | - uses: actions/setup-node@v2-beta 15 | with: 16 | node-version: '12' 17 | - 18 | name: Run script 19 | run: ./scripts/publish.sh 20 | env: 21 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 22 | -------------------------------------------------------------------------------- /icons/refarch/E-Commerce/Commerce Marketing.svg: -------------------------------------------------------------------------------- 1 | Commerce SOURCE FILES -------------------------------------------------------------------------------- /icons/refarch/E-Commerce/Commerce Payment.svg: -------------------------------------------------------------------------------- 1 | Commerce SOURCE FILES -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2017 Frederic Lavigne 2 | 3 | Licensed under the Apache License, Version 2.0 (the "License"); 4 | you may not use this file except in compliance with the License. 5 | You may obtain a copy of the License at 6 | 7 | http://www.apache.org/licenses/LICENSE-2.0 8 | 9 | Unless required by applicable law or agreed to in writing, software 10 | distributed under the License is distributed on an "AS IS" BASIS, 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | See the License for the specific language governing permissions and 13 | limitations under the License. 14 | -------------------------------------------------------------------------------- /icons/namedsvg/Load Balancing.svg: -------------------------------------------------------------------------------- 1 | Journey Icons 2 -------------------------------------------------------------------------------- /icons/namedsvg/APP UI.svg: -------------------------------------------------------------------------------- 1 | Journey Icons -------------------------------------------------------------------------------- /icons/namedsvg/IDE.svg: -------------------------------------------------------------------------------- 1 | Journey Icons 2 -------------------------------------------------------------------------------- /scripts/publish.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # build the PPT 4 | yarn 5 | node architecture.js 6 | node -e "require('./drawio.js')().generate('drawio.xml')" 7 | 8 | # get the current gh-pages branch 9 | git clone --depth=1 --branch=gh-pages "https://l2fprod:${GITHUB_TOKEN}@github.com/l2fprod/myarchitecture" build 10 | 11 | # copy over the PPT 12 | cp mycatalog-architecture-diagram-template.pptx build 13 | cp drawio.xml build 14 | 15 | git config --global push.default simple 16 | git config --global user.email "autobuild@not-a-dom.ain" 17 | git config --global user.name "autobuild" 18 | 19 | # commit to gh-pages 20 | (cd build && git add . && git commit -m "new deck" && git push) 21 | -------------------------------------------------------------------------------- /icons/refarch/E-Commerce/Commerce e-Commerce Appl.svg: -------------------------------------------------------------------------------- 1 | Commerce SOURCE FILES -------------------------------------------------------------------------------- /icons/namedsvg/Predictive Market Scenario.svg: -------------------------------------------------------------------------------- 1 | Journey Icons -------------------------------------------------------------------------------- /icons/namedsvg/Bank Services.svg: -------------------------------------------------------------------------------- 1 | Journey Icons 2 -------------------------------------------------------------------------------- /icons/namedsvg/Ivestment Portfolio.svg: -------------------------------------------------------------------------------- 1 | Journey Icons -------------------------------------------------------------------------------- /icons/namedsvg/Local Network.svg: -------------------------------------------------------------------------------- 1 | Journey Icons 2 -------------------------------------------------------------------------------- /icons/refarch/E-Commerce/Commerce Customer Care.svg: -------------------------------------------------------------------------------- 1 | Commerce SOURCE FILES -------------------------------------------------------------------------------- /icons/namedsvg/Backend Server.svg: -------------------------------------------------------------------------------- 1 | Journey Icons -------------------------------------------------------------------------------- /icons/namedsvg/Virtual Reality.svg: -------------------------------------------------------------------------------- 1 | Journey Icons -------------------------------------------------------------------------------- /icons/namedsvg/Composer Rest Server.svg: -------------------------------------------------------------------------------- 1 | Journey Icons 2 -------------------------------------------------------------------------------- /icons/refarch/E-Commerce/Commerce Distributed Order.svg: -------------------------------------------------------------------------------- 1 | Commerce SOURCE FILES -------------------------------------------------------------------------------- /icons/namedsvg/External Service.svg: -------------------------------------------------------------------------------- 1 | Journey Icons -------------------------------------------------------------------------------- /configuration.json: -------------------------------------------------------------------------------- 1 | { 2 | "background": "FFFFFF", 3 | "color": "646365", 4 | "box": { 5 | "width": 1, 6 | "height": 1.2 7 | }, 8 | "circleSize": 0.5, 9 | "iconSize": 0.3, 10 | "font": { 11 | "size": 6, 12 | "face": "Helvetica" 13 | }, 14 | "columnsPerSlide": 9, 15 | "linesPerSlide": 4, 16 | 17 | "pages": { 18 | "diagram": { 19 | "font": { 20 | "size": 9, 21 | "face": "Helvetica" 22 | }, 23 | "numbers": { 24 | "color": "0C755F", 25 | "size": 0.20, 26 | "font": { 27 | "size": 7, 28 | "face": "Helvetica" 29 | } 30 | } 31 | }, 32 | "vpc": { 33 | "region": { 34 | "background": "F2F2F2" 35 | } 36 | } 37 | }, 38 | 39 | "icon": { 40 | "background": "FFFFFF", 41 | "color": "646365" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /icons/refarch/E-Commerce/Commerce Warehouse Mgmt.svg: -------------------------------------------------------------------------------- 1 | Commerce SOURCE FILES -------------------------------------------------------------------------------- /icons/namedsvg/Application Server.svg: -------------------------------------------------------------------------------- 1 | Journey Icons 2 -------------------------------------------------------------------------------- /icons/namedsvg/Outbound Calls.svg: -------------------------------------------------------------------------------- 1 | Journey Icons 2 -------------------------------------------------------------------------------- /icons/namedsvg/Microphone.svg: -------------------------------------------------------------------------------- 1 | Journey Icons -------------------------------------------------------------------------------- /icons/namedsvg/View Logs.svg: -------------------------------------------------------------------------------- 1 | Journey Icons 2 -------------------------------------------------------------------------------- /icons/namedsvg/Discovery Collection.svg: -------------------------------------------------------------------------------- 1 | Journey Icons 2 -------------------------------------------------------------------------------- /icons/namedsvg/IBM Data Science Experience.svg: -------------------------------------------------------------------------------- 1 | Journey Icons 2 -------------------------------------------------------------------------------- /architecture-icons.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "title": "Kubernetes", 4 | "icon": "https://raw.githubusercontent.com/kubernetes/kubernetes/master/logo/logo.png" 5 | }, 6 | { 7 | "title": "Docker", 8 | "icon": "https://www.docker.com/wp-content/uploads/2022/03/vertical-logo-monochromatic.png" 9 | }, 10 | { 11 | "title": "nginx", 12 | "icon": "https://upload.wikimedia.org/wikipedia/commons/c/c5/Nginx_logo.svg" 13 | }, 14 | { 15 | "title": "MySQL", 16 | "icon": "https://cdn.worldvectorlogo.com/logos/mysql-4.svg" 17 | }, 18 | { 19 | "title": "GIT", 20 | "icon": "https://git-scm.com/images/logos/downloads/Git-Icon-1788C.png" 21 | }, 22 | { 23 | "title": "Spring Boot", 24 | "icon": "https://www.vectorlogo.zone/logos/springio/springio-icon.svg" 25 | }, 26 | { 27 | "title": "Cloud Foundry", 28 | "icon": "https://raw.githubusercontent.com/cloudfoundry/logos/master/CF_Icon_4-colour.svg" 29 | }, 30 | { 31 | "title": "PHP", 32 | "icon": "https://upload.wikimedia.org/wikipedia/commons/2/27/PHP-logo.svg" 33 | } 34 | ] 35 | -------------------------------------------------------------------------------- /icons/refarch/E-Commerce/Commerce Business Process.svg: -------------------------------------------------------------------------------- 1 | Commerce SOURCE FILES -------------------------------------------------------------------------------- /icons/namedsvg/Developer Portal.svg: -------------------------------------------------------------------------------- 1 | Journey Icons -------------------------------------------------------------------------------- /icons/namedsvg/Cloud Shell.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /icons/refarch/VPC/classic_tag.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | 14 | -------------------------------------------------------------------------------- /icons/namedsvg/Store.svg: -------------------------------------------------------------------------------- 1 | Journey Icons 2 -------------------------------------------------------------------------------- /architecture.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const PptxGenJS = require('pptxgenjs'); 3 | const pptx = new PptxGenJS(); 4 | const async = require('async'); 5 | 6 | try { 7 | fs.mkdirSync('public'); 8 | } catch (err) { 9 | } 10 | try { 11 | fs.mkdirSync('public/generated'); 12 | } catch (err) { 13 | } 14 | try { 15 | fs.mkdirSync('public/generated/icons'); 16 | } catch (err) { 17 | } 18 | 19 | // global properties for the deck 20 | pptx.setLayout('LAYOUT_16x9'); 21 | 22 | const configuration = JSON.parse(fs.readFileSync('configuration.json')); 23 | 24 | async.waterfall([ 25 | (callback) => { 26 | console.log('Default Diagram...'); 27 | require('./pages/default-diagram').generate(pptx, configuration, callback); 28 | }, 29 | (callback) => { 30 | console.log('VPC Diagram...'); 31 | require('./pages/vpc').generate(pptx, configuration, callback); 32 | }, 33 | (callback) => { 34 | console.log('All resources...'); 35 | require('./pages/all-resources').generate(pptx, configuration, callback); 36 | }, 37 | (callback) => { 38 | console.log('More icons...'); 39 | require('./pages/more-icons').generate(pptx, configuration, callback); 40 | } 41 | ], (err) => { 42 | if (err) { 43 | console.log('[KO]', err); 44 | } else { 45 | pptx.save('mycatalog-architecture-diagram-template'); 46 | console.log('[OK] Processing complete!'); 47 | } 48 | }); 49 | -------------------------------------------------------------------------------- /icons/namedsvg/Customer Database.svg: -------------------------------------------------------------------------------- 1 | Journey Icons 2 -------------------------------------------------------------------------------- /icons/namedsvg/Configure.svg: -------------------------------------------------------------------------------- 1 | Journey Icons 2 -------------------------------------------------------------------------------- /icons/namedsvg/Sensor.svg: -------------------------------------------------------------------------------- 1 | Journey Icons 2 -------------------------------------------------------------------------------- /icons/namedsvg/List.svg: -------------------------------------------------------------------------------- 1 | Journey Icons 2 -------------------------------------------------------------------------------- /icons/namedsvg/Service Provider.svg: -------------------------------------------------------------------------------- 1 | Journey Icons 2 -------------------------------------------------------------------------------- /icons/namedsvg/zOS.svg: -------------------------------------------------------------------------------- 1 | Journey Icons 2 -------------------------------------------------------------------------------- /icons/namedsvg/Example Data Set.svg: -------------------------------------------------------------------------------- 1 | Journey Icons -------------------------------------------------------------------------------- /icons/namedsvg/Store Sales.svg: -------------------------------------------------------------------------------- 1 | Journey Icons 2 -------------------------------------------------------------------------------- /icons/refarch/Social/Messaging.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /icons/namedsvg/Bot.svg: -------------------------------------------------------------------------------- 1 | Journey Icons 2 -------------------------------------------------------------------------------- /icons/refarch/VPC/load_balancer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 26 | 27 | -------------------------------------------------------------------------------- /icons/namedsvg/API.svg: -------------------------------------------------------------------------------- 1 | Journey Icons 2 -------------------------------------------------------------------------------- /pages/all-resources.js: -------------------------------------------------------------------------------- 1 | const async = require('async'); 2 | const fs = require('fs'); 3 | const request = require('request'); 4 | 5 | const imageHelper = require('../lib/image-helper'); 6 | const pageHelper = require('../lib/page-helper'); 7 | 8 | function generate(pptx, configuration, onComplete) { 9 | request({ 10 | url: 'https://mycatalog.weworkinthecloud.com/generated/resources-full.json' 11 | }, (err, response, body) => { 12 | if (err) { 13 | onComplete(err); 14 | } else { 15 | fs.writeFile('public/generated/resources-full.json', body, (err) => { 16 | if (err) { 17 | onComplete(err); 18 | } else { 19 | const resources = JSON.parse(fs.readFileSync('public/generated/resources-full.json', { encoding: 'UTF-8' })); 20 | downloadResourceIcons(pptx, configuration, resources, onComplete); 21 | } 22 | }); 23 | } 24 | }); 25 | } 26 | 27 | function downloadResourceIcons(pptx, configuration,resources, onComplete) { 28 | console.log('Downloading all resource icons from mycatalog...'); 29 | const tasks = []; 30 | const resourceIcons = []; 31 | resources.forEach((resource) => { 32 | if (resource.localPngIcon && !fs.existsSync(resource.localPngIcon)) { 33 | tasks.push((callback) => { 34 | imageHelper.downloadRaw(`https://mycatalog.weworkinthecloud.com/${resource.localPngIcon}`, './public/' + resource.localPngIcon, callback); 35 | }); 36 | } 37 | if (resource.localSvgIcon && !fs.existsSync(resource.localSvgIcon)) { 38 | tasks.push((callback) => { 39 | imageHelper.downloadRaw(`https://mycatalog.weworkinthecloud.com/${resource.localSvgIcon}`, './public/' + resource.localSvgIcon, callback); 40 | }); 41 | } 42 | 43 | resourceIcons.push({ 44 | id: resource.id, 45 | title: resource.displayName, 46 | icon: `public/generated/icons/${resource.id}.png`, 47 | }) 48 | }); 49 | 50 | async.parallelLimit(tasks, 5, (err) => { 51 | if (err) { 52 | onComplete(err); 53 | } else { 54 | resourceIcons.splice(0, 0, { 55 | type: 'separator', 56 | title: 'Catalog', 57 | }); 58 | pageHelper.addIcons(pptx, configuration, resourceIcons); 59 | onComplete(null); 60 | } 61 | }); 62 | } 63 | 64 | module.exports = { 65 | generate, 66 | }; 67 | -------------------------------------------------------------------------------- /icons/namedsvg/Brokerage.svg: -------------------------------------------------------------------------------- 1 | Journey Icons -------------------------------------------------------------------------------- /icons/refarch/Applications/Annotate.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /icons/namedsvg/Inventory.svg: -------------------------------------------------------------------------------- 1 | Journey Icons 2 -------------------------------------------------------------------------------- /icons/refarch/VPC/public_gateway.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 31 | 32 | -------------------------------------------------------------------------------- /icons/namedsvg/Converbelt.svg: -------------------------------------------------------------------------------- 1 | Journey Icons -------------------------------------------------------------------------------- /icons/refarch/VPC/floating_ip.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 31 | 32 | -------------------------------------------------------------------------------- /icons/refarch/VPC/bridge.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 32 | 33 | -------------------------------------------------------------------------------- /icons/refarch/Applications/Index.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /icons/namedsvg/Break Circuit.svg: -------------------------------------------------------------------------------- 1 | Journey Icons -------------------------------------------------------------------------------- /icons/namedsvg/Account Management.svg: -------------------------------------------------------------------------------- 1 | Journey Icons 2 -------------------------------------------------------------------------------- /pages/more-icons.js: -------------------------------------------------------------------------------- 1 | const async = require('async'); 2 | const fs = require('fs'); 3 | const humanizeString = require('humanize-string'); 4 | 5 | const imageHelper = require('../lib/image-helper'); 6 | const pageHelper = require('../lib/page-helper'); 7 | 8 | function generate(pptx, configuration, onComplete) { 9 | const tasks = []; 10 | 11 | // additional manually added icons 12 | const moreIcons = JSON.parse(fs.readFileSync('architecture-icons.json', 'utf8')); 13 | moreIcons.forEach((icon) => { 14 | icon.pathOnDisk = `public/generated/icons/${icon.title}-${encodeURIComponent(icon.icon)}.png`; 15 | if (fs.existsSync(icon.pathOnDisk)) { 16 | icon.icon = icon.pathOnDisk; 17 | } 18 | }); 19 | 20 | moreIcons.forEach((icon) => { 21 | if (icon.icon.startsWith("http")) { 22 | tasks.push((callback) => { 23 | imageHelper.downloadImage(icon.icon, icon.pathOnDisk.substring(0, icon.pathOnDisk.length - 4), icon.color ? `#${icon.color}` : null, (err) => { 24 | if (err) { 25 | console.log(err); 26 | } 27 | icon.icon = icon.pathOnDisk; 28 | callback(null); 29 | }); 30 | }); 31 | } 32 | }); 33 | 34 | function addPage(title) { 35 | moreIcons.push({ 36 | type: 'separator', 37 | title, 38 | }); 39 | } 40 | 41 | function addFolder(folderName, iconCallback/*icon*/) { 42 | fs.readdirSync(folderName).filter(filename => filename.endsWith('.svg')).sort().forEach((iconFilename) => { 43 | const icon = { 44 | icon: iconFilename, 45 | title: iconFilename.substring(0, iconFilename.lastIndexOf('.')), 46 | }; 47 | moreIcons.push(icon); 48 | tasks.push((callback) => { 49 | imageHelper.convertSvgImage(`${folderName}/${iconFilename}`, null, (err, pngImageFilename) => { 50 | if (err) { 51 | callback(err); 52 | } else { 53 | icon.icon = pngImageFilename; 54 | if (iconCallback) { 55 | iconCallback(icon); 56 | } 57 | callback(null); 58 | } 59 | }); 60 | }); 61 | }); 62 | } 63 | 64 | // automatic icons 65 | addFolder('icons/namedsvg'); 66 | fs.readdirSync('icons/refarch') 67 | .filter(filename => '.DS_Store'!==filename && fs.statSync(`icons/refarch/${filename}`).isDirectory) 68 | .forEach((dir) => { 69 | addPage(humanizeString(dir)); 70 | addFolder(`icons/refarch/${dir}`, (icon) => { 71 | icon.standalone = true; 72 | icon.title = humanizeString(icon.title); 73 | }); 74 | }); 75 | 76 | async.parallelLimit(tasks, 5, (err) => { 77 | if (err) { 78 | console.log(err); 79 | onComplete(err); 80 | } else { 81 | pageHelper.addIcons(pptx, configuration, moreIcons); 82 | onComplete(null); 83 | } 84 | }); 85 | } 86 | 87 | module.exports = { 88 | generate, 89 | }; 90 | -------------------------------------------------------------------------------- /icons/refarch/VPC/direct_link.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 35 | 36 | -------------------------------------------------------------------------------- /icons/refarch/VPC/router.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 36 | 37 | -------------------------------------------------------------------------------- /icons/namedsvg/Access Controll List.svg: -------------------------------------------------------------------------------- 1 | Journey Icons 2 ACL -------------------------------------------------------------------------------- /icons/refarch/VPC/region_tag.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 37 | 38 | -------------------------------------------------------------------------------- /icons/refarch/VPC/vpn_policy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 37 | 38 | -------------------------------------------------------------------------------- /pages/vpc.js: -------------------------------------------------------------------------------- 1 | function generate(pptx, configuration, onComplete) { 2 | let slide = pptx.addNewSlide(); 3 | slide.back = configuration.background; 4 | 5 | slide.addText('The Internet', { 6 | shape: pptx.shapes.CLOUD, 7 | x: 0.3, 8 | y: 1.8, 9 | w: 1.1, 10 | h: 0.7, 11 | fontSize: configuration.pages.diagram.font.size, 12 | fontFace: configuration.pages.diagram.font.face, 13 | fill: { type:'solid', color: configuration.background }, 14 | line: configuration.color, 15 | lineSize: 1, 16 | align: 'center', 17 | valign: 'middle', 18 | color: configuration.color, 19 | }); 20 | 21 | // an arrow 22 | slide.addShape(pptx.shapes.LINE, { 23 | x: 1.52, 24 | y: 2.15, 25 | w: 0.56, 26 | h: 0, 27 | line: configuration.color, 28 | lineSize: 1, 29 | lineTail: 'arrow', 30 | }); 31 | 32 | slide.addText('Region', { 33 | shape: pptx.shapes.ROUNDED_RECTANGLE, 34 | x: 2.2, 35 | y: 0.3, 36 | w: 4, 37 | h: 4, 38 | fontSize: configuration.pages.diagram.font.size, 39 | fontFace: configuration.pages.diagram.font.face, 40 | rectRadius: 0.1, 41 | fill: { type:'solid', color: configuration.background }, 42 | line: configuration.color, 43 | lineSize: 1.5, 44 | align: 'left', 45 | valign: 'top', 46 | color: configuration.color, 47 | lineDash: 'sysDot', 48 | }); 49 | 50 | slide.addText('VPC', { 51 | shape: pptx.shapes.ROUNDED_RECTANGLE, 52 | x: 2.35, 53 | y: 0.6, 54 | w: 3.7, 55 | h: 3.55, 56 | fontSize: configuration.pages.diagram.font.size, 57 | fontFace: configuration.pages.diagram.font.face, 58 | rectRadius: 0.1, 59 | fill: { type:'solid', color: configuration.pages.vpc.region.background }, 60 | line: configuration.color, 61 | lineSize: 1.5, 62 | align: 'left', 63 | valign: 'top', 64 | color: configuration.color, 65 | }); 66 | 67 | slide.addText('Zone', { 68 | shape: pptx.shapes.ROUNDED_RECTANGLE, 69 | x: 2.5, 70 | y: 0.9, 71 | w: 3.4, 72 | h: 3.10, 73 | fontSize: configuration.pages.diagram.font.size, 74 | fontFace: configuration.pages.diagram.font.face, 75 | rectRadius: 0.1, 76 | fill: { type:'solid', color: configuration.background }, 77 | line: configuration.color, 78 | lineSize: 1.5, 79 | align: 'left', 80 | valign: 'top', 81 | lineDash: 'sysDash', 82 | color: configuration.color, 83 | }); 84 | 85 | slide.addText('Subnet', { 86 | shape: pptx.shapes.ROUNDED_RECTANGLE, 87 | x: 2.65, 88 | y: 1.2, 89 | w: 3.1, 90 | h: 1.2, 91 | fontSize: configuration.pages.diagram.font.size, 92 | fontFace: configuration.pages.diagram.font.face, 93 | rectRadius: 0.1, 94 | fill: { type:'solid', color: configuration.background }, 95 | line: configuration.color, 96 | lineSize: 0.5, 97 | align: 'left', 98 | valign: 'top', 99 | color: configuration.color, 100 | }); 101 | 102 | onComplete(); 103 | } 104 | 105 | module.exports = { 106 | generate, 107 | }; 108 | -------------------------------------------------------------------------------- /icons/namedsvg/Media.svg: -------------------------------------------------------------------------------- 1 | Journey Icons -------------------------------------------------------------------------------- /icons/refarch/Data/DataServices.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /icons/namedsvg/Recommendation Service.svg: -------------------------------------------------------------------------------- 1 | Journey Icons 2 -------------------------------------------------------------------------------- /lib/page-helper.js: -------------------------------------------------------------------------------- 1 | function addIcons(pptx, configuration, icons) { 2 | const iconOffset = (configuration.circleSize - configuration.iconSize) / 2; 3 | 4 | let column = 0; 5 | let line = 0; 6 | let slide = null; 7 | 8 | console.log(`${icons.length} icons to generate`); 9 | icons.forEach(icon => { 10 | if (icon.type === 'separator') { 11 | column = 0; 12 | line = 0; 13 | console.log(`Adding a new slide ${icon.title}`); 14 | slide = pptx.addNewSlide(); 15 | slide.back = configuration.background; 16 | slide.addText(icon.title.toUpperCase(), { 17 | x: 0.3, 18 | y: 0, 19 | fontSize: configuration.font.size * 2, 20 | fontFace: configuration.font.face, 21 | autoFit: true, 22 | margin: 0, 23 | color: icon.color || configuration.icon.color, 24 | bold: true, 25 | }); 26 | return; 27 | } 28 | 29 | if (slide === null) { 30 | console.log('Adding a new slide'); 31 | slide = pptx.addNewSlide(); 32 | slide.back = configuration.background; 33 | } 34 | 35 | if (icon.standalone) { 36 | // the icon 37 | slide.addImage({ 38 | path: icon.icon, 39 | x: 0.3 + column * configuration.box.width, 40 | y: 0.3 + line * configuration.box.height, 41 | w: configuration.circleSize, 42 | h: configuration.circleSize, 43 | }); 44 | } else { 45 | // the circle 46 | slide.addShape(pptx.shapes.OVAL, { 47 | x: 0.3 + column * configuration.box.width, 48 | y: 0.3 + line * configuration.box.height, 49 | w: configuration.circleSize, 50 | h: configuration.circleSize, 51 | fill: { type:'solid', color: configuration.icon.background }, 52 | line: icon.color || configuration.icon.color, 53 | lineSize: 1.5, 54 | }); 55 | 56 | // the icon 57 | slide.addImage({ 58 | path: icon.icon, 59 | x: 0.3 + column * configuration.box.width + iconOffset, 60 | y: 0.3 + line * configuration.box.height + iconOffset, 61 | w: configuration.iconSize, 62 | h: configuration.iconSize, 63 | }); 64 | } 65 | 66 | // the resource name 67 | console.log(` icon: ${icon.title}`); 68 | slide.addText(icon.title.toUpperCase(), { 69 | x: 0.3 + column * configuration.box.width - 0.1, 70 | y: 0.3 + line * configuration.box.height + configuration.circleSize + 0.05, 71 | fontSize: configuration.font.size, 72 | fontFace: configuration.font.face, 73 | w: configuration.circleSize + 0.2, 74 | align: 'center', 75 | valign: 'top', 76 | autoFit: true, 77 | margin: 0, 78 | color: icon.color || configuration.icon.color, 79 | bold: true, 80 | }); 81 | 82 | column = column + 1; 83 | 84 | if (column >= configuration.columnsPerSlide) { 85 | column = 0; 86 | line = line + 1; 87 | console.log('Adding a new line'); 88 | } 89 | 90 | if (line >= configuration.linesPerSlide) { 91 | column = 0; 92 | line = 0; 93 | slide = null; 94 | } 95 | }); 96 | } 97 | 98 | module.exports = { 99 | addIcons, 100 | }; 101 | -------------------------------------------------------------------------------- /icons/refarch/E-Commerce/Commerce Supply Chain Mgmt.svg: -------------------------------------------------------------------------------- 1 | Commerce SOURCE FILES -------------------------------------------------------------------------------- /icons/namedsvg/IBM Cloud.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 16 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 26 | 27 | 28 | 29 | 30 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | cloud-svg-mark 39 | 41 | 43 | 45 | 47 | 49 | -------------------------------------------------------------------------------- /icons/refarch/VPC/subnet_tag.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 42 | 43 | -------------------------------------------------------------------------------- /icons/refarch/VPC/zone_tag.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 43 | 44 | -------------------------------------------------------------------------------- /icons/namedsvg/Market Data.svg: -------------------------------------------------------------------------------- 1 | Journey Icons 2 -------------------------------------------------------------------------------- /icons/namedsvg/Outlet.svg: -------------------------------------------------------------------------------- 1 | Journey Icons -------------------------------------------------------------------------------- /icons/refarch/DevOps/CodeEditor.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /pages/default-diagram.js: -------------------------------------------------------------------------------- 1 | function generate(pptx, configuration, onComplete) { 2 | let slide = pptx.addNewSlide(); 3 | slide.back = configuration.background; 4 | 5 | slide.addNotes(`Generated on ${new Date()}`); 6 | 7 | slide.addText('USER', { 8 | x: 0.6, 9 | y: 0.5, 10 | w: 0.4, 11 | fontSize: configuration.pages.diagram.font.size, 12 | fontFace: configuration.pages.diagram.font.face, 13 | autoFit: true, 14 | margin: 0, 15 | color: configuration.color, 16 | bold: true, 17 | }); 18 | 19 | slide.addShape(pptx.shapes.LINE, { 20 | x: 2.3, 21 | y: 0.5, 22 | w: 0.01, 23 | h: 4.5, 24 | line: configuration.color, 25 | lineSize: 1.5, 26 | }); 27 | 28 | slide.addText('EXTERNAL', { 29 | x: 2.7, 30 | y: 0.5, 31 | w: 0.75, 32 | fontSize: configuration.pages.diagram.font.size, 33 | fontFace: configuration.pages.diagram.font.face, 34 | autoFit: true, 35 | margin: 0, 36 | color: configuration.color, 37 | bold: true, 38 | }); 39 | 40 | slide.addShape(pptx.shapes.LINE, { 41 | x: 5.3, 42 | y: 0.5, 43 | w: 0.01, 44 | h: 4.5, 45 | line: configuration.color, 46 | lineSize: 1.5, 47 | }); 48 | 49 | slide.addText('CLOUD', { 50 | x: 5.7, 51 | y: 0.5, 52 | w: 0.75, 53 | fontSize: configuration.pages.diagram.font.size, 54 | fontFace: configuration.pages.diagram.font.face, 55 | autoFit: true, 56 | margin: 0, 57 | color: configuration.color, 58 | bold: true, 59 | }); 60 | 61 | // an arrow 62 | slide.addShape(pptx.shapes.LINE, { 63 | x: 6, 64 | y: 2.3, 65 | w: 2, 66 | h: 0, 67 | line: configuration.color, 68 | lineSize: 1, 69 | lineTail: 'arrow', 70 | }); 71 | 72 | // a diagonal 73 | slide.addShape(pptx.shapes.LINE, { 74 | x: 6, 75 | y: 1.3, 76 | w: 1, 77 | h: 0, 78 | line: configuration.color, 79 | lineSize: 1, 80 | lineTail: 'arrow', 81 | rotate: 45, 82 | }); 83 | 84 | // a text box 85 | slide.addText("POST /users", { 86 | shape: pptx.shapes.ROUNDED_RECTANGLE, 87 | x: 6, 88 | y: 3, 89 | w: 1, 90 | h: 0.3, 91 | fontSize: configuration.pages.diagram.font.size, 92 | fontFace: configuration.pages.diagram.font.face, 93 | color: configuration.color, 94 | fill: { type: 'solid', color: configuration.background }, 95 | line: configuration.color, 96 | lineSize: 1, 97 | }); 98 | 99 | // to number steps 100 | for (let number = 0; number < 15; number++) { 101 | slide.addShape(pptx.shapes.OVAL, { 102 | x: 0.3, 103 | y: 1 + (configuration.pages.diagram.numbers.size + 0.1) * number, 104 | w: configuration.pages.diagram.numbers.size, 105 | h: configuration.pages.diagram.numbers.size, 106 | fill: { type: 'solid', color: configuration.background }, 107 | line: configuration.pages.diagram.numbers.color, 108 | lineSize: 1.5, 109 | }); 110 | slide.addText(`${number + 1}`, { 111 | x: 0.3, 112 | y: 1 + (configuration.pages.diagram.numbers.size + 0.1) * number, 113 | w: configuration.pages.diagram.numbers.size, 114 | h: configuration.pages.diagram.numbers.size, 115 | fontSize: configuration.pages.diagram.numbers.font.size, 116 | fontFace: configuration.pages.diagram.numbers.font.face, 117 | align: 'center', 118 | valign: 'middle', 119 | autoFit: true, 120 | margin: 0, 121 | color: '0C755F', 122 | bold: true, 123 | }); 124 | } 125 | 126 | onComplete(null); 127 | } 128 | 129 | module.exports = { 130 | generate, 131 | }; 132 | -------------------------------------------------------------------------------- /icons/refarch/VPC/internet_services.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 45 | 46 | -------------------------------------------------------------------------------- /icons/namedsvg/Service.svg: -------------------------------------------------------------------------------- 1 | Journey Icons 2 -------------------------------------------------------------------------------- /icons/refarch/Data/EnterpriseUserDirectory.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /icons/namedsvg/Online News Content.svg: -------------------------------------------------------------------------------- 1 | Journey Icons -------------------------------------------------------------------------------- /icons/refarch/VPC/rules.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 53 | 54 | -------------------------------------------------------------------------------- /icons/refarch/Applications/SaaSApplications.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /lib/image-helper.js: -------------------------------------------------------------------------------- 1 | const request = require('request'); 2 | const fs = require('fs'); 3 | const sharp = require('sharp'); 4 | const svg2png = require("svg2png"); 5 | const zlib = require('zlib'); 6 | 7 | function convertSvgImage(svgImageFilename, svgRecolor, onComplete) { 8 | let outputFilenameWithoutExtension = svgImageFilename.substring(0, svgImageFilename.lastIndexOf('.')); 9 | 10 | // if we generated it before, just return it 11 | if (fs.existsSync(`${outputFilenameWithoutExtension}.png`)) { 12 | onComplete(null, `${outputFilenameWithoutExtension}.png`); 13 | return; 14 | } 15 | 16 | readAndConvertSvgToPng(outputFilenameWithoutExtension, 'png', svgRecolor, onComplete); 17 | } 18 | 19 | function convertWithSharp(imageBuffer, callback/*err, buffer*/) { 20 | sharp(imageBuffer) 21 | .resize(64, 64) 22 | .toBuffer() 23 | .then(buffer => callback(null, buffer)) 24 | .catch(e => callback(e)); 25 | } 26 | 27 | function convertWithSvgToPng(imageBuffer, callback/*err, buffer*/) { 28 | svg2png(imageBuffer, { width: 64, height: 64 }) 29 | .then(buffer => callback(null, buffer)) 30 | .catch(e => callback(e)); 31 | } 32 | 33 | function readAndConvertSvgToPng(filenameWithoutExtension, extension, svgRecolor, onComplete) { 34 | var imageBuffer = fs.readFileSync(`${filenameWithoutExtension}.svg`); 35 | 36 | // some svg are compressed 37 | try { 38 | imageBuffer = zlib.gunzipSync(imageBuffer); 39 | } catch (e) { } 40 | 41 | if (svgRecolor) { 42 | let imageBufferAsString = imageBuffer.toString(); 43 | imageBufferAsString = imageBufferAsString.replace(' { 48 | fs.writeFile(`${filenameWithoutExtension}.png`, buffer, (convertError) => { 49 | if (convertError) { 50 | onComplete(convertError); 51 | } else { 52 | onComplete(null, `${filenameWithoutExtension}.${extension}`); 53 | } 54 | }); 55 | } 56 | 57 | convertWithSharp(imageBuffer, (sharpErr, sharpBuffer) => { 58 | if (sharpErr) { 59 | console.log(`Failed to convert ${filenameWithoutExtension}.svg with sharp. Defaulting to svg2png...`, sharpErr); 60 | convertWithSvgToPng(imageBuffer, (svgToPngError, svgToPngBuffer) => { 61 | if (svgToPngError) { 62 | onComplete(svgToPngError); 63 | } else { 64 | onConvertSuccess(svgToPngBuffer, onComplete); 65 | } 66 | }); 67 | } else { 68 | onConvertSuccess(sharpBuffer, onComplete); 69 | } 70 | }); 71 | } 72 | 73 | function downloadRaw(fileUrl, destination, onComplete) { 74 | console.log('Downloading', fileUrl); 75 | request({ 76 | url: fileUrl, 77 | encoding: null, 78 | }, (err, res, body) => { 79 | if (err) { 80 | onComplete(err); 81 | } else if (res.statusCode === 404) { 82 | onComplete(new Error(`${fileUrl} not found`)); 83 | } else { 84 | fs.writeFile(destination, body, (saveErr) => { 85 | onComplete(saveErr); 86 | }); 87 | } 88 | }); 89 | } 90 | 91 | function downloadImage(imageUrl, outputFilenameWithoutExtension, svgRecolor, onComplete) { 92 | console.log('Downloading', imageUrl); 93 | request({ 94 | url: imageUrl, 95 | encoding: null 96 | }, (err, res, body) => { 97 | if (err) { 98 | onComplete(err); 99 | } else if (res.statusCode === 404) { 100 | onComplete(new Error(`${imageUrl} not found`)); 101 | } else { 102 | let extension; 103 | if (imageUrl.indexOf('.svg') > 0) { 104 | extension = 'svg'; 105 | } else { 106 | extension = 'png'; 107 | } 108 | fs.writeFile(`${outputFilenameWithoutExtension}.${extension}`, body, (saveErr) => { 109 | if (saveErr) { 110 | onComplete(saveErr); 111 | } else { 112 | if (extension === 'svg') { 113 | readAndConvertSvgToPng(outputFilenameWithoutExtension, extension, svgRecolor, onComplete); 114 | } else { 115 | onComplete(null, `${outputFilenameWithoutExtension}.${extension}`); 116 | } 117 | } 118 | }); 119 | } 120 | }); 121 | } 122 | 123 | module.exports = { 124 | convertSvgImage, 125 | downloadImage, 126 | downloadRaw, 127 | }; 128 | -------------------------------------------------------------------------------- /icons/refarch/VPC/public_tag.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 56 | 57 | -------------------------------------------------------------------------------- /icons/refarch/Security/Application Security-19.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /icons/refarch/VPC/vpn_gateway.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 65 | 66 | -------------------------------------------------------------------------------- /icons/refarch/Users/browser.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /icons/refarch/VPC/datacenter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 68 | 69 | -------------------------------------------------------------------------------- /icons/refarch/VPC/ibm_cloud_tag.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 68 | 69 | -------------------------------------------------------------------------------- /icons/refarch/Users/user interface.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /icons/namedsvg/Distribution Center.svg: -------------------------------------------------------------------------------- 1 | Journey Icons 2 --------------------------------------------------------------------------------