Peta

Articles

Tags

analysis (1) science (1) music (1) test (1) mathematics (1) physics (1) feature-test (1) datetime (1) testing (1) diagrams (1) features (1) calculus (1) quantum (1) abc-notation (1) rst (1) rendering (1) code-blocks (1)

Diagram Feature Test

Diagram Feature Test

Peta
diagrams rst features

Diagram Feature Test

This article tests all the diagram types supported by Peta's diagram rendering feature.

Flowchart Example

Start Process Decision End No Yes

This is a simple flowchart showing a decision-making process. The flowchart renderer automatically calculates node positions and draws edges with arrowheads.

Flowchart with Title

Order Processing Flow Customer Order Received Check Stock Process Order Ship Order Out of Stock Notify Customer End

This flowchart demonstrates the order processing workflow with a custom title. Notice how the title is displayed at the top of the diagram.

Complex Flowchart

Software Development Lifecycle Requirements Design Development Testing Deployment Approved Rejected Passed Failed

This flowchart shows the iterative nature of software development with feedback loops.

Gantt Chart Example

01/01 01/08 01/15 01/22 01/29 Planning Development Testing Deployment

This Gantt chart shows a typical software development timeline with tasks, dates, and durations.

Gantt Chart with Title

Q1 2024 Project Timeline 01/01 01/08 01/15 01/22 01/29 02/05 02/12 Research Design Implementation Testing Documentation

This Gantt chart displays a quarterly project timeline with overlapping phases.

Sequence Diagram Example

User System Database Login Request Query User User Data Login Success

This sequence diagram illustrates the interaction between a user, system, and database during a login process.

Sequence Diagram with Title

E-commerce Checkout Flow Customer Website Cart Payment Order Add to Cart Store Item Update Total Proceed to Checkout Process Payment Payment Confirmed Create Order Order Created Confirmation

This sequence diagram shows the complete e-commerce checkout process with multiple actors.

Class Diagram Example

User Attributes Methods Database Attributes Methods API Attributes Methods Cache Attributes Methods

This class diagram shows the relationships between different components in a system, including composition (+|+) and aggregation (|o|).

Class Diagram with Title

Blog System Architecture Post Attributes Methods Comment Attributes Methods Category Attributes Methods Tag Attributes Methods User Attributes Methods

This class diagram illustrates the relationships in a blog system with multiple interconnected entities.

State Diagram Example

start pause resume stop Running Paused

This state diagram demonstrates the state transitions in a simple system with start, pause, resume, and stop actions.

State Diagram with Title

Traffic Light System timer timer timer emergency Red Green Yellow

This state diagram models a traffic light system with both automatic and emergency state transitions.

How Diagrams Work

All diagrams are rendered in Rust during the build time. The SVG markup is generated directly and embedded in the final HTML output. This means:

  • No client-side JavaScript rendering required
  • Fast page load times
  • Static, cacheable output
  • Full control over styling and theming

The diagram syntax is text-based and easy to write, similar to Mermaid but with Peta's own custom rendering engine.

Supported Diagram Types

Flowchart: Node-based process diagrams with arrows Gantt Chart: Timeline-based project schedules Sequence Diagram: Interaction sequences between actors Class Diagram: UML class structures and relationships

  • State Diagram: State transitions and events

Future Enhancements

The diagram system is designed to be extensible. Future versions may include:

Advanced layout algorithms (force-directed, hierarchical) Interactive hover effects Pan and zoom capabilities Export to PNG/SVG Customizable node shapes Subdiagram support