As a part of the homework assignment, for my project, I needed to draw the Logical Architectural diagram using the Lucid Charts. I could complete the whole diagram with some difficulty, but getting the Serverless Cache icon was a biggest challenge.
I watched Andrew's video several times and then followed his instructions on how to get the icon from momento's site.
Here are the instructions on how to get the Serverless icon from momento's site.
1. Get the code from the momento site.
On the browser, type in gomomento.com
On the left side, Right click the icon,
select Inspect
Click the drop down on the <svg width
select the code (click on the code)
Edit as HTML
Copy the code
<path d="M12.0658 39.6447C12.201 39.788 12.3715 39.8933 12.5603 39.9498C12.749 40.0063 12.9493 40.0121 13.141 39.9666C13.3327 39.9211 13.5091 39.8259 13.6523 39.6906C13.7956 39.5553 13.9006 39.3847 13.957 39.1959L15.4636 33.7146L22.3233 7.81434C22.3556 7.6727 22.435 7.54623 22.5486 7.45564C22.6621 7.36504 22.8031 7.3157 22.9484 7.3157C23.0936 7.3157 23.2346 7.36504 23.3482 7.45564C23.4617 7.54623 23.5411 7.6727 23.5734 7.81434L24.3107 9.80173C24.5698 10.5072 24.9972 11.1388 25.5558 11.6416C26.1144 12.1443 26.7874 12.5031 27.5162 12.6867L33.9271 14.4497C34.5493 14.6203 35.1055 14.9747 35.5229 15.4666C35.9404 15.9584 36.1998 16.5648 36.2671 17.2064C36.3142 17.9744 36.1857 18.7431 35.8913 19.454C35.597 20.165 35.1445 20.7995 34.5682 21.3094L32.9655 22.6877C31.6939 23.8 30.7873 25.2699 30.3642 26.9054C29.941 28.5409 30.0209 30.266 30.5934 31.8554L33.2219 39.228C33.2841 39.395 33.3832 39.5459 33.5118 39.6693C33.6403 39.7928 33.795 39.8857 33.9644 39.9412C34.1338 39.9966 34.3135 40.0132 34.4902 39.9896C34.6669 39.966 34.836 39.9029 34.9849 39.805C38.3092 37.3573 40.8798 34.0258 42.4042 30.1893C43.9286 26.3529 44.3455 22.1656 43.6076 18.1039C42.8325 13.7662 40.7702 9.76205 37.6888 6.61212C34.6075 3.46219 30.6497 1.31222 26.3301 0.441754C23.3239 -0.169176 20.2233 -0.146199 17.2264 0.509215C14.2295 1.16463 11.4024 2.43805 8.92559 4.24812C6.44881 6.05819 4.37691 8.36507 2.8423 11.0213C1.30769 13.6776 0.34413 16.6248 0.0131988 19.6746C-0.0190388 19.9292 0.00796968 20.1879 0.0921178 20.4304C0.176266 20.6729 0.315284 20.8927 0.498329 21.0726C0.681374 21.2526 0.903489 21.3878 1.14739 21.4678C1.39128 21.5478 1.65038 21.5704 1.90444 21.5338C2.76825 21.4533 3.63935 21.5544 4.46174 21.8307C5.28413 22.1069 6.03962 22.5522 6.67964 23.1379C7.31966 23.7236 7.83004 24.4367 8.178 25.2314C8.52595 26.0261 8.70377 26.8849 8.70003 27.7524V30.9579C8.73821 34.1645 9.93348 37.2494 12.0658 39.6447V39.6447Z" fill="currentColor"></path>
<path d="M27.1956 18.6882C28.2933 18.6882 29.183 17.7984 29.183 16.7008C29.183 15.6032 28.2933 14.7134 27.1956 14.7134C26.098 14.7134 25.2083 15.6032 25.2083 16.7008C25.2083 17.7984 26.098 18.6882 27.1956 18.6882Z" fill="currentColor"></path>
- Modify the code by adding the following 2 lines on the top
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 44 40" xmlns="http://www.w3.org/2000/svg">
- Modify the code by deleting these lines which occur 2x
fill="currentColor">
- In the end, the code should look like this
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 44 40" xmlns="http://www.w3.org/2000/svg">
<path d="M12.0658 39.6447C12.201 39.788 12.3715 39.8933 12.5603 39.9498C12.749 40.0063 12.9493 40.0121 13.141 39.9666C13.3327 39.9211 13.5091 39.8259 13.6523 39.6906C13.7956 39.5553 13.9006 39.3847 13.957 39.1959L15.4636 33.7146L22.3233 7.81434C22.3556 7.6727 22.435 7.54623 22.5486 7.45564C22.6621 7.36504 22.8031 7.3157 22.9484 7.3157C23.0936 7.3157 23.2346 7.36504 23.3482 7.45564C23.4617 7.54623 23.5411 7.6727 23.5734 7.81434L24.3107 9.80173C24.5698 10.5072 24.9972 11.1388 25.5558 11.6416C26.1144 12.1443 26.7874 12.5031 27.5162 12.6867L33.9271 14.4497C34.5493 14.6203 35.1055 14.9747 35.5229 15.4666C35.9404 15.9584 36.1998 16.5648 36.2671 17.2064C36.3142 17.9744 36.1857 18.7431 35.8913 19.454C35.597 20.165 35.1445 20.7995 34.5682 21.3094L32.9655 22.6877C31.6939 23.8 30.7873 25.2699 30.3642 26.9054C29.941 28.5409 30.0209 30.266 30.5934 31.8554L33.2219 39.228C33.2841 39.395 33.3832 39.5459 33.5118 39.6693C33.6403 39.7928 33.795 39.8857 33.9644 39.9412C34.1338 39.9966 34.3135 40.0132 34.4902 39.9896C34.6669 39.966 34.836 39.9029 34.9849 39.805C38.3092 37.3573 40.8798 34.0258 42.4042 30.1893C43.9286 26.3529 44.3455 22.1656 43.6076 18.1039C42.8325 13.7662 40.7702 9.76205 37.6888 6.61212C34.6075 3.46219 30.6497 1.31222 26.3301 0.441754C23.3239 -0.169176 20.2233 -0.146199 17.2264 0.509215C14.2295 1.16463 11.4024 2.43805 8.92559 4.24812C6.44881 6.05819 4.37691 8.36507 2.8423 11.0213C1.30769 13.6776 0.34413 16.6248 0.0131988 19.6746C-0.0190388 19.9292 0.00796968 20.1879 0.0921178 20.4304C0.176266 20.6729 0.315284 20.8927 0.498329 21.0726C0.681374 21.2526 0.903489 21.3878 1.14739 21.4678C1.39128 21.5478 1.65038 21.5704 1.90444 21.5338C2.76825 21.4533 3.63935 21.5544 4.46174 21.8307C5.28413 22.1069 6.03962 22.5522 6.67964 23.1379C7.31966 23.7236 7.83004 24.4367 8.178 25.2314C8.52595 26.0261 8.70377 26.8849 8.70003 27.7524V30.9579C8.73821 34.1645 9.93348 37.2494 12.0658 39.6447V39.6447Z"></path>
<path d="M27.1956 18.6882C28.2933 18.6882 29.183 17.7984 29.183 16.7008C29.183 15.6032 28.2933 14.7134 27.1956 14.7134C26.098 14.7134 25.2083 15.6032 25.2083 16.7008C25.2083 17.7984 26.098 18.6882 27.1956 18.6882Z"></path>
</svg>
2. Copy the code onto any CDE
I copied onto VCode editor
Save the file on your desktop as momento.svg
3. Import the momento.svg file on the Lucid Chart
On the Lucid Chart
Click on + Shape Library
Under My Libraries, Click on Import Shapes
Click on Add to existing library
Click on drop-down button
Click on My saved shapes
Click on Choose file(s)
Choose the momento.svg file
Open and save
This will bring over the Serverless Cache icon onto your diagram
Top comments (0)