replace hand-drawn figure pictures with diagrams

We used hand-drawn figure pictures from Parra in earlier version. Going forward it would be nice to use diagrams code (for e.g., mermaid https://mermaidjs.github.io/mermaid-live-editor/) such that its easy to track changes in diagrams, figures.

For now, I am using the png files created using mermaid online editor.  