Skip to main content
Version: Summer 2025 SheCodes Program

Diagram Application Guide for Different Scenarios

📚 Academic Paper Diagram Standards​

Journal Submission Requirements​

General Academic Standards
  • Vector Format: Use SVG or EPS format to ensure print quality
  • Font Standards: Times New Roman or Arial, minimum 8pt size
  • Numbering Rules: Figure 1, Figure 2... consecutive numbering
  • Citation Format: Use "as shown in Figure 1" or "see Figure 1" in the text
  • Resolution Requirements: Bitmap minimum 300 DPI
  • Color Mode: CMYK for print, RGB for digital

IEEE Paper Diagram Standards​

Size Requirements

  • Single column: 3.5 inches wide
  • Double column: 7.16 inches wide
  • Height: not exceeding 9.5 inches

Label Standards

  • Caption: Below figure, centered
  • Font: 8-10pt
  • Line width: 0.5-1pt

LaTeX Integration​

% Embedding vector graphics in LaTeX
\usepackage{graphicx}
\usepackage{svg}

\begin{figure}[htbp]
\centering
\includesvg[width=0.8\textwidth]{figures/architecture.svg}
\caption{System Architecture Overview}
\label{fig:architecture}
\end{figure}

% Referencing figures
As shown in Figure~\ref{fig:architecture}...

Converting Mermaid Diagrams to Academic Format​

You: Convert my Mermaid flowchart to a format suitable for IEEE papers

Gemini: I'll help you convert it to academic paper format:

1. Export as SVG:
 - Mermaid Live Editor → Actions → Download SVG
 - Save as figure1_flowchart.svg

2. Optimize SVG:
 - Open with Inkscape
 - Set document size to 3.5 inches (single column)
 - Change font to Arial 10pt
 - Adjust line width to 0.75pt
 - Export as EPS format

3. LaTeX code:
\begin{figure}[t]
\centering
\includegraphics[width=\columnwidth]{figure1_flowchart.eps}
\caption{Proposed Algorithm Workflow}
\label{fig:workflow}
\end{figure}

📝 Technical Documentation Best Practices​

README Documentation Diagrams​

# Project Architecture

## System Overview

```mermaid
graph TB
  subgraph "前įŦŊåš”į”Ļ"
      A[React App]
      B[Redux Store]
  end

  subgraph "后įŦŊæœåŠĄ"
      C[API Gateway]
      D[Auth Service]
      E[Business Logic]
  end

  subgraph "数æŪåą‚"
      F[(PostgreSQL)]
      G[(Redis Cache)]
  end

  A --> C
  C --> D
  C --> E
  E --> F
  E --> G
```

## API Flow

![API Flow](./docs/api-flow.png)

## Deployment Architecture

See architecture diagram in [Deployment Documentation](./docs/deployment.md).

API Documentation Diagrams​

Recommended Diagram Types

Sequence Diagrams

Show API call flow

Suitable for: Authentication, Payment flows

Flowcharts

Explain business logic

Suitable for: Data processing, Decision flows

State Diagrams

Describe resource state changes

Suitable for: Order status, Task status

System Design Documentation​

Diagram Organization Recommendations
  1. Layered Display: Progress from high-level architecture to detailed design layer by layer
  2. Unified Style: Maintain consistent colors, fonts, and icon styles
  3. Version Control: Include diagram source files in Git
  4. Synchronized Updates: Update diagrams promptly when code changes

ðŸŽŊ PPT Presentation Optimization​

Step-by-Step Display Techniques​

Progressive Display

  1. Slide 1: Core concepts
  2. Slide 2: Add details
  3. Slide 3: Complete architecture
  4. Slide 4: Emphasize key points

Animation Effects

  • Fade in: New components
  • Path animation: Data flow
  • Color change: State transitions
  • Zoom: Focus switching

PowerPoint Integration​

Export Settings:
1. Draw.io:
 - File → Export as → PNG
 - Resolution: 300 DPI
 - Background: Transparent
 - Margin: 20px

2. Mermaid:
 - Download SVG
 - In PowerPoint: Insert → Picture → SVG
 - Right-click → Convert to Shape (editable)

3. Optimization Tips:
 - Use slide master for unified styles
 - Set diagram animation sequence
 - Add annotations and guide lines

Business Presentation Color Schemes​

Professional Blue
Tech Style

🌐 Web Integration​

Online Documentation Embedding​

<!-- Mermaid diagram embedding -->
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({ startOnLoad: true });
</script>

<div class="mermaid">
graph LR
  A[垀始] --> B[åĪ„į†]
  B --> C[įŧ“束]
</div>

<!-- Draw.io diagram embedding -->
<iframe
frameborder="0"
style="width:100%;height:400px;"
src="https://viewer.diagrams.net/?highlight=0000ff&edit=_blank&layers=1&nav=1">
</iframe>

Markdown Platform Support​

✅ Native Mermaid Support
  • GitHub
  • GitLab
  • Notion
  • Obsidian
🔧 Plugin Required
  • Confluence
  • WordPress
  • Ghost
  • Hugo

ðŸ“ą Responsive Design​

Mobile Optimization​

Mobile Diagram Design Principles
  • Simplify Content: Reduce number of nodes, highlight core information
  • Enlarge Elements: Ensure touch targets are at least 44×44 pixels
  • Vertical Layout: Prioritize top-to-bottom layout
  • Scalable: Use SVG format to support zooming
  • Segmented Display: Split complex diagrams into multiple simple diagrams

ðŸŽĻ Brand Consistency​

Corporate VI Application​

You: Help me create diagram styles that comply with company VI guidelines

Gemini: I'll help you create diagram styles for corporate VI guidelines:

📐 Draw.io Style Configuration:

1. Create corporate style library:
 - File → New Library
 - Name: CompanyVI_Shapes

2. Define color specifications:
 Primary: #1E40AF (Corporate Blue)
 Secondary: #10B981 (Success Green)
 Warning: #F59E0B (Warning Orange)
 Error: #EF4444 (Error Red)

3. Font specifications:
 Heading: Helvetica Bold 14pt
 Body: Helvetica Regular 11pt
 Caption: Helvetica Light 9pt

4. Element styles:
 Border radius: 8px
 Line width: 2px
 Shadow: 0 2px 4px rgba(0,0,0,0.1)

5. Mermaid theme configuration:
 %%{init: {
   'theme': 'base',
   'themeVariables': {
     'primaryColor': '#1E40AF',
     'primaryTextColor': '#FFFFFF',
     'primaryBorderColor': '#1E40AF',
     'lineColor': '#64748B',
     'secondaryColor': '#10B981'
   }
 }}%%

🚀 Next Steps​

Learn more advanced techniques:

AI-Assisted Creation →

Practical Projects →