DocOps Logo

More DocOps.io Extension Capabilities

Additional visualizations to supplement AsciiDoctor documents.

Additional DocOps Extension Capabilities

Explore more powerful visualizations for your AsciiDoctor documents including callouts, metrics cards, word clouds, color utilities, and tree charts.

📣 Callouts 📊 Metrics Cards ☁️ Word Cloud 🎨 Color Gradients 🌳 Tree Chart 📊 Quadrant Chart

Additional Capabilities

Callouts

Create visually appealing and informative callout visualizations for processes, metrics, and timelines. See Docs for more examples.

AsciiDoctor 
[docops,callout]
----
title: Software Development Process
type=systematic
---
Phase | Action | Result | Improvement
Requirements | Gather user needs and system requirements | Detailed requirements document | Involve end-users earlier in the process
Design | Create system architecture and UI/UX designs | Technical specifications and wireframes | Use more design thinking workshops
Development | Implement features according to specifications | Working code with unit tests | Increase pair programming sessions
Testing | Perform QA and user acceptance testing | Bug reports and validation results | Automate more test cases
Deployment | Release to production environment | Live application | Implement more robust CI/CD pipeline
----
Output
Scorecard

Metrics Cards

Create visually appealing metric visualizations to highlight key performance indicators and statistics. See Docs for more examples.

AsciiDoctor 
[docops,metricscard]
----
title= Q2 2024 Business Metrics
---
Metric | Value | Sublabel
Revenue | $4.2M | 18% YoY Growth
New Customers | 156 | 42 Enterprise
Customer Retention | 94% | 2% Improvement
NPS Score | 72 | Industry Leading
----
Output
Scorecard

Word Cloud

Create visually appealing word clouds to highlight key terms and their relative importance. See Docs for more examples.

AsciiDoctor 
[docops,wordcloud]
----
title= Technology Trends 2024
width= 800
height= 600
minFontSize= 12
maxFontSize= 60
---
Cloud Computing | 85 | #3498db
Artificial Intelligence | 92 | #9b59b6
Machine Learning | 78 | #2ecc71
Blockchain | 65 | #e74c3c
IoT | 70 | #f39c12
Cybersecurity | 88 | #1abc9c
Big Data | 75 | #34495e
DevOps | 68 | #e67e22
Quantum Computing | 55 | #27ae60
Edge Computing | 60 | #d35400
----
Output
Scorecard

Color Gradient Generator

Generate beautiful color gradients from a hex color code

Enter Hex Color Code
Examples: #4361ee, #FF5733, #2ecc71
Gradient Result

Enter a hex color code and click Generate to see the result

Tree Chart

Create interactive hierarchical tree diagrams to visualize relationships and structures. See Docs for examples.

AsciiDoctor 
[docops,treechart]
----
title=Organization Chart
width=800
height=600
orientation=vertical
collapsible=true
expanded=true
darkMode=false
---
CEO
    CTO | #3498db
        Engineering Manager
            Senior Developer
            Developer
            Junior Developer
        QA Manager
            QA Engineer
            QA Analyst
    CFO | #2ecc71
        Finance Manager
            Accountant
            Financial Analyst
    CMO | #e74c3c
        Marketing Manager
            Marketing Specialist
            Content Creator
----
Output
Tree Chart

Quadrant Chart

Create strategic priority matrices and impact vs. effort analysis charts. See Docs for more examples.

AsciiDoctor 
[docops,quadrant]
----
title: Strategic Priority Matrix
subtitle: Impact vs. Effort Analysis
---
Label | X | Y | Size | Color | Description
Feature A | 75 | 80 | 8 | #10b981 | High impact, low effort
Feature B | 30 | 85 | 10 | #3b82f6 | High impact, high effort
Feature C | 20 | 30 | 7 | #f59e0b | Low impact, low effort
Feature D | 85 | 25 | 9 | #ef4444 | Low impact, high effort
----
Output
Quadrant Chart