Add a Diagrams.net Workflow

Download Procore's Workflow to Edit/ Use as a Template

1. As a Training Center Editor, you have access to Download Workflows page for access to copies of all of Procore's Already Existing workflows that you can either slightly modify or use as templates for your own custom workflows.
2. Once you click on one of our workflows, click on the DOWNLOAD icon in the Upper Right Corner of the screen as shown below:

3. Choose where to save your updated workflow 
   • If you have a Google Account, saving to Google Drive is preferred.
   • If you do NOT have a Google Account, DEVICE is the most commonly used option.

4. Now, choose the option to OPEN EXISTING DIAGRAM and just open the file that you just saved to either your Google Drive or Computer/ Device.
5. At this point you can start editing as necessary.

Export Workflow from diagrams.net & Embed into Training Center using SVG Code

1. Once you're done creating/ editing your workflow, make sure your workflow saved the most recent edits, and close and re-open the workflow.
2. Choose File > Embed >SVG.
3. Uncheck Lightbox. The only thing checked should be Fit.
4. Click Embed.
5. Delete the browser disclaimer in the code:
   
    
6. Add opening and closing <div></div> tags around the SVG Code as shown below
   •  Warning - Do not forget to add a <div> wrapper to the code you paste in. Forgetting to do so will result in the page adding unnecessary page breaks every single time the page is put in Editor mode!

     OPENING DIV WRAPPER

     CLOSING DIV WRAPPER

7. Click Copy.
8. Open the Training Center page that you would like to add the Workflow.
9. Click Edit, then click Edit Live.
10. Type 123 where you would like the content to appear.
    • Note: Center the text if you want the item you are embedding to be centered.
11. Click HTML at the top right.
12. Press CTRL+F or COMMAND+F on your keyboard to open the ‘Find on Page’ function.
13. Type 123 in the find field and press ENTER on your keyboard.
14. Highlight 123 and replace the text with the copied embed code.
15. Click Save.